CODEWITHSUNDEEP
cssangularcolorsiconsmat-stepper
Marvin Chang
Marvin Chang

Reputation: 9

Angular 12 mat-stepper: mat-step-icon-state-number changes its color by condition

I have a question regarding the step icon color of Angular Material Stepper. This module provides an attribute, linear, to allow user to finish all steps in sequential order (step1,2,3...) or randomly (step1,4,3,2..).

As for my project, I have a button to switch boolean of linear. What I want to achieve is:

  1. When linear is false, step icon color should be purple Angular 12 mat-stepper with linear mode off
  2. When linear is true, step icon color should be gray Angular 12 mat-stepper with linear mode on

The reason is, when users are allowed to finish steps in a random order, the color of step icon should also be purple. Otherwise, the default color gray might make them feel they are not able to jump to any step they want

My code structure shows below ( stakBlitz):

//component.ts

isLinear = true

// component.html

<button (click)="isLinear = !isLinear">Linear State Change</button>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
....
</mat-horizontal-stepper>

//component.css

::ng-deep .mat-step-header .mat-step-icon-state-number {
    background-color: #ba2805;
    background-color: rgba(0, 0, 0, 0.54);
    color: #fff;
}

Well, I know that the class of .mat-step-icon-state-number is the key to decide step icon color. However, this class is not original HTML class. It is generated by Angular. Also, those step icons are not visible in HTML, and they are created by Angular. So it is impossible to use ngClass or ngStyle to bind the style to anything in HTML

Can someone help me fix this problem?

Upvotes: 0

Views: 2266

Answers (0)

Related Questions