Angular 6 dynamically apply CSS class to mat-cell

Issue

I have material table in which depending on content of the cell I need to use specific CSS class.

I use the following css classes

.status-code{
    flex: 0 0 10% !important;
    width: 10% !important;
}

.status-code-succsess{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}

.status-code-failed{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(229,185,181);
    color: rgb(97,38,33);
}

.status-code-empty{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(216,216,216);
}

Here's the html

<ng-container matColumnDef="Warehouse">
                <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
                <mat-cell class="{{row.warehouse}} == 'Success' ? status-code-success : ({{row.warehouse}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.warehouse}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="DPI">
                <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
                <mat-cell class="{{row.dpi}} == 'Success' ? status-code-success : ({{row.dpi}} == 'Failed' ? status-code-failed : status-code-empty)" *matCellDef="let row"> {{row.dpi}} </mat-cell>
            </ng-container>

However, I have just one row of data with 'Success' in Warehouse cell, but it gives me style with pink background

Please help, what may be wrong?

Solution

Try this using [ngClass].

You may have to make following changes while using ngClass :

*. Remove the interpolation {} against each variable
*. Include all class names in single quotes.

<ng-container matColumnDef="Warehouse">
    <mat-header-cell class="status-code" *matHeaderCellDef> Warehouse </mat-header-cell>
    <mat-cell [ngClass]="row.warehouse == 'Success' ? 'status-code-success' : (row.warehouse == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.warehouse}} </mat-cell>
</ng-container>

<ng-container matColumnDef="DPI">
    <mat-header-cell class="status-code" *matHeaderCellDef> DPI </mat-header-cell>
    <mat-cell [ngClass]="row.dpi == 'Success' ? 'status-code-success' : (row.dpi == 'Failed' ? 'status-code-failed' : 'status-code-empty')"
         *matCellDef="let row"> {{row.dpi}} </mat-cell>
</ng-container>

Also you have a typo in class name.

Change .status-code-succsess as .status-code-success

.status-code-success{
    flex: 0 0 10% !important;
    width: 10% !important;
    background: rgb(196,214,160);
    color: rgb(80,99,42);
}

Answered By - Amit Chigadani