title: Alternate row colours angular material table
body: <p>I am wondering how I target the even/odd rows inside a <code>Angular Material Table</code> so that I can set the even/odd rows a different background colour.</p>
  
  <p>I setup my <code>ClaimFileHistoryDataSource</code> class:</p>
  
  <pre><code>claimClientInformation: ClaimFileHistory[];
  dataSource : ClaimFileHistoryDataSource;
  displayedColumns = ['TypeImg', 'Description', 'Agent'];
  
  
  export class ClaimFileHistoryDataSource extends DataSource&lt;ClaimFileHistory&gt; {
  
      constructor(private _claimFileHistory: ClaimFileHistory[]) {
        super();
      }
  
      connect(): Observable&lt;ClaimFileHistory[]&gt; {
        return Observable.of(this._claimFileHistory);
      }
  
      disconnect() {}
  }
  </code></pre>
  
  <p>On <code>NgInit</code> I make a call to my service to go and get the data I need and populate the <code>DataSource</code>:</p>
  
  <pre><code>this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response =&gt; {
    this.claimClientInformation = response;       
    this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
  });
  </code></pre>
  
  <p>This is fine and the Data is coming back as it should.</p>
  
  <p>In the HTML the <code>Mat-Table</code> looks like this:</p>
  
  <pre><code>    &lt;mat-table #table [dataSource]="dataSource"&gt;
  
        &lt;ng-container matColumnDef="TypeImg"&gt;
          &lt;mat-cell *matCellDef="let row"&gt;&lt;img [src]='row.TypeImg' height="40px"&gt;&lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="Description"&gt;
          &lt;mat-cell *matCellDef="let row"&gt;
            &lt;div&gt;
              &lt;span class="d-block"&gt;{{row.Description}}&lt;/span&gt;
              &lt;span class="d-block"&gt;{{row.Date}}&lt;/span&gt;
            &lt;/div&gt;
  
          &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;ng-container matColumnDef="Agent"&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.Agent}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
      &lt;/mat-table&gt;
  </code></pre>
  
  <p>Again I was wondering how do I go about getting the Odd/Even rows of the table and setting them a different row background colour?</p>