title: Change row color in Angular Material table
body: <p>How do I change the color of a material table row depending on a cell value. </p>
  
  <p>I have this in my <strong>HTML</strong>:</p>
  
  <pre><code>&lt;mat-table [dataSource]="dataSource" class="mat-elevation-z2" style="margin-bottom: 10px;" matSort&gt;
  
      &lt;ng-container matColumnDef="DateAdded"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Submission Time &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.DateAdded | date: 'medium'}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="StartDate"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Start Date &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.StartDate | date}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="EndDate"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; End Date &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.EndDate | date}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="IsGranted"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Granted &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"  [ngClass]="row.IsGranted ? 'make-green' : ''"&gt; {{row.IsGranted}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="Remarks"&gt;
          &lt;mat-header-cell *matHeaderCellDef&gt; Remarks &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row" [style.color]="row.color"&gt;
          &lt;button class="btn btn-dark btn-sm" (click)="viewRemarks(row.Remarks)"&gt;Select&lt;/button&gt;
          &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
  
      &lt;mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="{'make-green': row.IsGranted==true}"&gt;&lt;/mat-header-row&gt;
                  &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
                  &lt;/mat-row&gt;
      &lt;/mat-table&gt;
  
  &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  </code></pre>
  
  <p>And my <strong>CSS</strong> :</p>
  
  <pre><code>.make-gold {
      background-color: gold
  }
  </code></pre>
  
  <p>This produces the following result:
  <a href="https://i.stack.imgur.com/5261Y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5261Y.png" alt="enter image description here"></a></p>
  
  <p>What I need is to change the background color of the whole row. Not just the cell. Thank you.</p>