How to show a series of steps in angular

Question

After searching for a lot of time I didnt find any good solution for my issue. For our application I have to show the progress of the order at the top of the screen. Something like below

But in our workflow we have a number of steps, 15 to be exact. I wanted to use a mat-stepper to implement the same since it has scrolling option but i am stuck in changing the color and icons for the same and how to change the color based on some condition. If the status matches the array status I want to show that in blue and the rest as completed in green.

.ts file

workFlowStatus: [] = [
'Received', 'Approved by Manager', 'Returned by Manager', 'resubmitted', 'Billed', 'Approved by Area Manager'
];
status = 'Approved by Area Manager';

.html

 <mat-horizontal-stepper class="step" [linear]="isLinear" #stepper>
        <mat-step *ngFor="let step of workFlowStatus; let i = index">
          <ng-template matStepLabel>{{ step }}</ng-template>
        </mat-step>
      </mat-horizontal-stepper>

score 0 · Answer 1 · answered Feb 24 '22 at 11:29

What about using matStepperIcon template with some custom functionality to support your color changing logic. For example you can show same template(template can be accessed by reference on can be a different component also) for ever step state:

<ng-template matStepperIcon="chat">
<mat-icon>forum</mat-icon>
</ng-template>

How to show a series of steps in angular

1 Answers1