How to set a material table cell's background color conditionally

Question

in the example material table given here, if I want to change the background color of all cells that contain a value > 10, where would I put that code?

Answer 1

There are so many ways to do it. This is the one way to do it like in weight cell if value is greater than 10 then yellow color in background.

<ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell [ngClass]="{clsWeight: element.weight > 10}" *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

Here is the working demo

If you dont want to use ngClass then you can directly use the style like this

<ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
    <mat-cell [style.background-color]="element.weight > 10 ? 'yellow' : ''" *matCellDef="let element"> {{element.weight}} </mat-cell>
  </ng-container>

Working Demo