Angular изменение цвета значка коврика

Question

Мне нужно изменить цвет фона иконки шага коврика (angular шаговый материал) на основе моего свойства массива: 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>

Однако цвет фона изменяется только с помощью:

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

Есть ли возможность динамически изменять цвет значка шага коврика в зависимости от условия?

Answer 1

внутри HTML: используйте [ngClass] и установите для своего условия значение classYellow или classGreen или classRed;

внутри TS : манипулировать переменными, которые go входят в условие в вашем HTML

внутри CSS: перемещаться туда, куда вы положили ngClass на mat-step-icon, чтобы установить фон цвет ... что-то вроде:

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

образец стек * блиц здесь