CODEWITHSUNDEEP
angularangular-materialangular-material-stepper
abhigyan nayak
abhigyan nayak

Reputation: 1444

Angular Material Stepper, Dynamic color change

I am trying to use the angular material stepper to use as a progress tracker ( I know it's not meant for it... but that is the only one fitting my requirement). I have 5 steps in my stepper.

I want to turn the color on when the product or item has reached that point. I found the class mat-step-icon-selected for it. But it's not working.

I will be fetching the data from an API that would return me the status/step number. and based on that I need to turn the color.

I am not able to change the color of the class. I tried using ngClass on mat-step But it's not working.

this is my code:

 <mat-horizontal-stepper [linear]="true">

    <mat-step>
        <ng-template matStepLabel >
          Initiated          
        </ng-template>
    </mat-step>
    <mat-step [className]="isTrue ? 'mat-step-icon-selected' : ''">
        <ng-template matStepLabel>PM</ng-template>
    </mat-step>
    <mat-step #stepper>
      <ng-template matStepLabel>HM</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>BU</ng-template>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel>FT</ng-template>
    </mat-step>
  </mat-horizontal-stepper>

Suggest a solution to update the color of the stepper displayed.

Thanks :)

Upvotes: 0

Views: 2180

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22213

Add this in your component's css file:

:host ::ng-deep .mat-step-icon-selected {
    color: green; // your styles
}

To set the step dynamically, try like this:

.ts

import { MatStepper } from "@angular/material";

@ViewChild("stepper") private stepper: MatStepper;

selectStep(index) {
    this.stepper.selectedIndex = index;
}

.html

<mat-horizontal-stepper [linear]="true" #stepper>
  ...
</mat-horizontal-stepper>

Upvotes: 1

Related Questions