I am working on a project using Angular Material and I want to dynamically change the color of the stepper based on different states. For example:
state: OK (should be green)
state: REFUSED (should be red)
Here is what I have done so far:
<mat-horizontal-stepper>
<mat-step state="schedule">
<ng-template matStepLabel>
<span [ngClass]="{'ok-step': status == 'OK', 'step-refused': status == 'REFUSED'}" *ngIf="(status == 'OK' || status == 'REFUSED'); else default">
{{status}}
</span>
<ng-template #default>
Default state
</ng-template>
</ng-template>
</mat-step>
</mat-horizontal-stepper>
Although I can change the text color dynamically, I am facing an issue with changing the background color of the stepper itself. I have tried this approach:
::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
background-color: #dd2c00 !important
}
However, this method only allows for setting one color at a time. Is there a way to set both red and green depending on the state?