Angular mat-step change icon color

Question

I need to change the background color of the mat-step icon (angular material stepper) based on my array property : etape.etat.

    <div *ngFor="let etape of pro.etapes; let i=index">

      <mat-step *ngIf="etape.etat == 1" style="background-color: yellow;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>
      </mat-step>

      <mat-step *ngIf="etape.etat ==2" style="background-color: green;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>

      </mat-step>

      <mat-step *ngIf="etape.etat ==2" style="background-color: red;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>

      </mat-step>

    </div>
    </mat-horizontal-stepper>

However, the background color is modified only using :

::ng-deep .mat-step-header .mat-step-icon{
  background-color: red; 
}

Is there any possibility to dynamically change the mat-step icon color based on a condition ?

Akber Iqbal Akber Iqbal · Accepted Answer · 2020-04-21T01:22:36

inside the HTML: Use [ngClass] and put your condition to set classYellow or classGreen or classRed;

inside the TS: manipulate the variables which go into the condition in your HTML

inside CSS: traverse from where you hae put the ngClass to mat-step-icon to set background color... something like:

::ng-deep .classYellow. mat-step-header .mat-step-icon{
  background-color: yellow; 
}

sample stackblitz here

Angular mat-step change icon color

1 Answers