Change multi mat-progress-bar color based on status?

In my project I have a mat-table with a mat-progress-bar in each row

  <mat-cell *matCellDef="let element">         -     <mat-progress-bar  mode="determinate"        [value]="element.status" class="green-progress"></mat-progress-bar>    </mat-cell>  

By default the color is green based on my CSS class

 .green-progress .mat-progress-bar-fill::after {    background-color: $green !important;  }  

I want to change the color to orange based on a status

  .orange-progress .mat-progress-bar-fill::after {background-color: $orange !important;}  

What I'm trying to achieve is change/display the color individually in each row based on the status that I get from an API

status good = green / status warning = orange

I tried using ngClass

[ngClass]="{'orange-progress': !isGoodStatus,'green-progress': isGoodStatus}"  

but the problem is that it change the progress bar color in each row for the same(orange or green).

what would be the best approach?

Thanks!

https://stackoverflow.com/questions/66523531/change-multi-mat-progress-bar-color-based-on-status March 08, 2021 at 10:15AM