apply ngclass in mat-cell getting error angular 8

Question

I am trying to use ngclass for my condition to apply css for the below html code but it was showing error.

I want to use two class that is colorRed & colorOrange

Here is my Two class (CSS)

    .colorRed{
        color:red;
    }
    .colorOrange{
        color: orange;
    }

Here is condition

If percentage is >=5% and <10%, show orange color
If percentage is >=10% need to show red color

Here is my html

    <ng-container matColumnDef="salaryIncrease">
     <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
     <td mat-cell [ngClass]="{'colorRed': element.salaryIncrease>= 5% }" *matCellDef="let element" > {{element.salaryIncreas| currency:'':''}}
     </td>
    </ng-container>

element.salaryIncrease>= 5% this will not work. You should not use % in comparison - its not an operator in JS. — Wand Maker

Mamta Mamta · Accepted Answer · 2020-02-16T18:24:44

You are getting template parse error because you are using % symbol during comparison and % symbol can't be used for comparing. Just compare values of percentage.

Also in standard scenario only value is stored for percentage values. % symbol is added only where needed

Working example for you

https://stackblitz.com/edit/angular-5fbpjc?embed=1&file=app/table-basic-example.html

apply ngclass in mat-cell getting error angular 8

1 Answers