title: How to select the table row in angular based on the object?
body: <p>Hello folks I have one scenario in which I am really confused on how to figure out...!!</p>
  <p>The scenario is I have</p>
  <p>1)The mat table(that is the angular material table)</p>
  <p>2)And a details view which shows the details based on the click of the particular row of the table.</p>
  <p>3)list of objects as a data source..!!</p>
  <p>I pass the object on the click event of the row and the object passes to the detail view and the details of that particular row is shown now the question is....!!</p>
  <p>I have the same data source that is list of objects for details view in that I have two buttons like &gt; &lt; the forward and backward respectively based on the click I select the elements from the list baaed on index and show in the details view.</p>
  <p>So according to the details view I need to select the particular row in my table..!! As the details view updates need to update the selection of the row.</p>
  <p>So how can I achieve that?</p>
  <p>Here goes my code</p>
  <pre><code>export class Question {
  
      private questionText: String;
      private qid: String;
      private category: String;
      private author: String;
      private level: String;
  
      constructor(qid:String,category:String,author:String,level:String,questionText:String){
          this.qid=qid;
          this.category=category;
          this.author=author;
          this.level=level;
          this.questionText=questionText;
      }
  
      /**
       * getQuestionText
       */
      public getQuestionText() {
          return this.questionText;
      }
  
      /**
       * getQuestionText
       */
      public getqid() {
          return this.qid;
      }
  
      /**
       * getQuestionText
       */
      public getcategory() {
          return this.category;
      }
  
      /**
       * getQuestionText
       */
      public getauthor() {
          return this.author;
      }
  
      /**
       * getlevel
       */
      public getlevel() {
          return this.level;
      }
  }
  </code></pre>
  <p>The above is the model class</p>
  <pre><code>public questions:Array&lt;Question&gt; = [
      new Question(&quot;1&quot;,&quot;TEXT_FREE&quot;,&quot;Harry&quot;,&quot;1&quot;,&quot;Write an essay on Lion&quot;),
      new Question(&quot;2&quot;,&quot;TEXT_SC&quot;,&quot;Harry Potter&quot;,&quot;2&quot;,&quot;Write an essay on tiger&quot;),
      new Question(&quot;3&quot;,&quot;TEXT_MC&quot;,&quot;Harry Motter&quot;,&quot;3&quot;,&quot;Write an essay on cheetah&quot;),
      new Question(&quot;4&quot;,&quot;TEXT_BC&quot;,&quot;Harry Bobber&quot;,&quot;4&quot;,&quot;Write an essay on Leapord&quot;),
    ];
  </code></pre>
  <p>above is my array of objects</p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
  
                                  &lt;!-- QID Column --&gt;
                                  &lt;ng-container matColumnDef=&quot;qid&quot;&gt;
                                      &lt;th mat-header-cell *matHeaderCellDef&gt; QID &lt;/th&gt;
                                      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.qid}} &lt;/td&gt;
                                  &lt;/ng-container&gt;
  
                                  &lt;!-- Name Column --&gt;
                                  &lt;ng-container matColumnDef=&quot;questionText&quot;&gt;
                                      &lt;th mat-header-cell *matHeaderCellDef&gt; Question Text &lt;/th&gt;
                                      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt; {{element.questionText}} &lt;/td&gt;
                                  &lt;/ng-container&gt;
  
                                  &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
                                  &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  
                              &lt;/table&gt;
  </code></pre>
  <p>the above is my mat table</p>
  <p>most imp things that hinders me</p>
  <p>1)Apply a class on the row when clicked like if I click the second row only that row must be highlighted..!!</p>
  <p>2)Need to select the row of the table when the index or say the whole object passed from the details view.</p>