How do I change the color of the font of a specific mat table column entries in angular?

Question

I have four mat-tables in angular 4. Table A, Table B, Table C and Table D. Table C has three columns. Column1, Column2, Column3. If I want to change the font color of the Column 3 entries in Table C, how do I do that? I don't have any experience in using angular prior to this, so forgive me if my question is too trivial or unclear.

Answer 1

Firstly, I would like to share the reference so you can understand better, I strongly recommended material design documentation.

Below are the link of reference that will help you to change the color of the font of a specific mat table column entries in angular

https://material.angular.io/components/table/examples

Simply, you need to add style attribute with color:

<ng-container matColumnDef="color">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Color </mat-header-cell>
  <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
</ng-container>

Answer 2

You can simply give style to any cell, header you want like this

<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>

Ref. from here

• https://material.angular.io/components/table/examples

Answer 3

If you want to control font color based on cell value? You can do something like this.

[style.color]="row.status === 'CLOSED' ? 'red' : 'black'"