0

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?

Marvin Chang
  • 9
  • 4
  • 1
    This should point you in the right direction (it's basically about editing the mat style classes): https://stackoverflow.com/questions/54574435/angular-material-stepper-change-icon-color – Aldin Bradaric Aug 03 '22 at 10:16
  • Thanks for sharing Bradaric! However, I do not want a fixed color. Rather, I want to change the color mat-step-icon-state-number by different conditions. >> isLinear, .mat-step-icon-state-number should be gray; !isLinear, .mat-step-icon-state-number should be purple. As we all know, the class of .mat-step-icon-state-number is not visible in HTML template, so I am not able to grab any object from HTML:(( – Marvin Chang Aug 03 '22 at 10:31
  • Might you please [edit] your question to include your code in the question itself (ideally as a [mcve]), rather than as an external link? From [ask]: *Help others reproduce the problem... if your problem is with code you've written, you should include some...Include just enough code to allow others to reproduce the problem... If it is possible to create a live example of the problem that you can link to ... then do so - but also **copy the code into the question itself**. Not everyone can access external sites, and the links may break over time.* – dbc Aug 03 '22 at 16:00
  • Well, thanks for suggestion. I have modified the description of my question. I also organized the content in a more structured way. Hope someone can give me help. – Marvin Chang Aug 04 '22 at 07:25

0 Answers0