Change background color stepper angular material with condition

Question

I would change dynamically color of the stepper in an Angular Material project. I could have more than one state for each step. For example:

state: OK (should be green)
state: REFUSED (should be red)

So, that's 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>

Here I can change the color of the text in a dynamic way. It works. But I can't change the color of the background of the stepper. I can do this in this way:

::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
}

But here's another problem. In this way I can't set 2 different colors. Just one. I can't set red or green depending on the state. Is there any possibility to do this?

Minal Shah Minal Shah · Accepted Answer · 2020-06-15T13:27:33

I think here instead of using the direct hexacode for the color. You can use the variable and set the value of variable in your .ts file based on the conditions you can set the background color.

So according to my solution you should update your .scss file to the below code

 ::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: var(--background)!important
   }

And you should add the following lines in your .ts file

if(status === 'Ok')
 {
  document.body.style.setProperty('--background', 'red')
 }
 else if(status === 'REFUSED')
 {
 document.body.style.setProperty('--background', 'red')
 }

Change background color stepper angular material with condition

1 Answers