How to conditionally change background color of a mat cell in Angular?

Question

I have a mat table, in which I want to change the Background color of a particular cell conditionally.

My HTML:

   <ng-container matColumnDef="Status">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
            Status
        </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.Status}} </mat-cell>
    </ng-container>

I have the color value in the "row" variable with row.statusBgColor.

I tried with:

<ng-container matColumnDef="Status">
  <mat-header-cell *matHeaderCellDef mat-sort-header>
     Status
  </mat-header-cell>
  <mat-cell style="background-color: {{row.statusBgColor}}" *matCellDef="let row"> {{row.Status}}
  </mat-cell>
</ng-container>

But that didn't work. Can anyone help me out of this?

[This post](https://stackoverflow.com/questions/49280975/angular-how-to-apply-ngstyle-conditions) will help you. — N.F., Jun 17 '21 at 05:36

score 1 · Answer 1 · answered Jun 17 '21 at 05:50

1

You can use ngStyle or style

Apply this property to mat-cell

ngStyle

[ngStyle]="{'background-color':row.statusBgColor}"
style

[style.backgroundColor]="row.statusBgColor"

answered Jun 17 '21 at 05:50

khush

2,702
2
16
35

score 0 · Answer 2 · answered Jun 17 '21 at 05:43

Got it .

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

How to conditionally change background color of a mat cell in Angular?

2 Answers2