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>
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'];
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments