I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row...
getRowClass(item: Item): string {
let class_ = "";
if (...condition1...) {
...
} else {
class_ = 'warm';
}
return class_;
}
The classes are quite simple, usually involving setting the color...
.hot {
color: red !important;
}
To configure the function for the row, you can do this...
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="category">
<mat-header-cell *matHeaderCellDef> category </mat-header-cell>
<mat-cell *matCellDef="let item">{{ item.category }}</mat-cell>
</ng-container>
...
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="getRowClass(row)"></mat-row>
</mat-table>
However, there is an issue with mat-table because mat-cell defines its own "color" attribute. One possible solution would be to add
[ngClass]="getCSSClass(item)"
to each "