I am facing an issue with highlighting row colors conditionally in my code. Although there are no errors, the background color is not being applied to the rows as expected. I have a total of 5 rows with the 'riskIndex' value set to 'H'. Can anyone help me identify what might be wrong with the code below?
app.component.html
<div>
<mat-table>
<ng-container matColumnDef="eventType">
<mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [ngClass]="{ 'high': row.riskIndex === 'High'}"></mat-row>
</mat-table>
</div>
component.css
.high {
background-color: red;
}