CODEWITHSUNDEEP
angularangular-materialmaterial-uimat-table
JC_Rambo
JC_Rambo

Reputation: 61

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">
      {{element.id}} - {{element.address}}
  <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!

Upvotes: 0

Views: 880

Answers (1)

Eranki
Eranki

Reputation: 807

I'm assuming that you are looping your data object in a table or somewhere else. So, you can add color field to your object. Whenever required, change color of that object to warn / primary / accent.

In .html:

<mat-spinner color="{{element.color}}"></mat-spinner>

If it is mat-table, you may require to re-render table after changing the color of an object. Add the following in .ts:

@ViewChild(MatTable, {static: false}) table: MatTable<tableType>;

After applying changes to color:

table.renderRows()

Upvotes: 1

Related Questions