I have an angular material design table component, and I can't achieve to change the font color of a selected row.
Here's a part of my HTML template:
<mat-table #table [dataSource]="dataSource" matSort flex layout="row" layout-fill>
<ng-container matColumnDef="segmentName">
<mat-header-cell *matHeaderCellDef mat-sort-header> Segment </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.segmentName}} </mat-cell>
</ng-container>
<ng-container matColumnDef="bestRider">
<mat-header-cell *matHeaderCellDef mat-sort-header> KOM </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.bestRider}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="setSelectedRow(row)" [ngClass]="{'highlight': selectedRowIndex == row.id}"></mat-row>
</mat-table>
And a part of css:
.highlight{
color: white;
background: #673AB7;
}
If I click on a row, the background color of the "highlight" style is correctly applied, but the font color is always black. Could someone help me ? Thanks !!