How to change state icon in Angular material stepper dynamically created component?

Question

I am using Angular material stepper component in the following example stackblitz

and I am trying to change dynamically the default numbers of each step to material icons by changing the state of selector mat-step using table stepicons in ngoninit. Can anyone help me with this?

<mat-vertical-stepper (selectionChange)="selectionChanged($event)" [linear]="true" style="width:100%;height:100%">
<ng-template matStepperIcon="edit">
    <mat-icon>done</mat-icon>
</ng-template>
<ng-template matStepperIcon="category">
    <mat-icon>category</mat-icon>
</ng-template>
<ng-template matStepperIcon="apps">
    <mat-icon>apps</mat-icon>
</ng-template>
<ng-template matStepperIcon="search">
    <mat-icon>search</mat-icon>
</ng-template>
<mat-step *ngFor="let step of steps; let i = index" [label]="step.title" state="stepicons.text">

    <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>

    <button mat-raised-button color="primary" matStepperNext
    style="margin-top:10px; float: left;position: relative;">Επόμενο</button>
</mat-step>

what do you need to do exactly question is not clear. please add more details — Indrakumara
Like this example here link it changes the label dynamically from component.ts file, I am trying to change the state attribute the same way. Maybe I could solve this with ng-template. — A.A

Indrakumara Indrakumara · Accepted Answer · 2019-09-29T16:11:06

Hope you are looking similar answer

https://stackblitz.com/edit/pxblue-dynamic-stepper-angular-n7bnmh

Add div and loop your steps array instead of mat-step loop

 <div *ngFor="let step of steps; let i = index">
<mat-step  [completed]="step.completed" [state]=myState[i]>
  <form>
    <ng-template matStepLabel>{{step.title || 'Choose an action'}}
      <mat-icon class="delete_icon"  *ngIf="stepper.selectedIndex === i" (click)="removeStep(i)"
        matTooltip="Remove step" matTooltipPosition="right">delete</mat-icon>
    </ng-template>
    <mat-radio-group class="radio-group" (change)="changeStepSelection($event, i)">
      <mat-radio-button style=" margin: 10px 0 " *ngFor="let option of stepOptions" [value]="option.value">
        {{option.label}}
      </mat-radio-button>
    </mat-radio-group>
  </form>
</mat-step>
</div>

put it into array your icon template text to get the relevant icon (you can build own your logic here)

myState = ['category','apps','search'];

How to change state icon in Angular material stepper dynamically created component?

1 Answers