CODEWITHSUNDEEP
cssangularmaterial-design
valerossi46
valerossi46

Reputation: 173

Change angular material table font color

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 !!

Upvotes: 6

Views: 49503

Answers (2)

valerossi46
valerossi46

Reputation: 173

OK found! I missed "row" in the "matCellDef": 

  <mat-cell *matCellDef="let row; let element" [ngClass]="{'highlight': selectedRowIndex == row.id}"> {{element.bestRider}} </mat-cell>

Thanks a lot!!!

Upvotes: 0

mohit uprim
mohit uprim

Reputation: 5334

You have to override the color of mat-cell:

.mat-cell {
    color: white;
}

or also apply the css class 'highlight' to mat-cell: 

<ng-container matColumnDef="bestRider">
      <mat-header-cell *matHeaderCellDef mat-sort-header> KOM </mat-header-cell>
      <mat-cell *matCellDef="let element; row" [ngClass]="{'highlight': selectedRowIndex == row.id}"> {{element.bestRider}} </mat-cell>
    </ng-container>

Upvotes: 11

Related Questions