Angular Mat Stepper enable only active navigation and completed navgation

Question

I made a steppers sample project with react.js and material UI. Link is https://stackblitz.com/edit/dynamic-stepper-react-l2m3mi?file=DynamicStepper.js

I am trying to make the same sample with Angular and material, But I was not able to achieve the same functionality as react. can anyone help me with this?

Angular work link:- https://stackblitz.com/edit/stepper-dynamic-gpwp1x?file=src%2Fapp%2Fapp.component.html

What I want to achieve in this sample:-

Stepper headers:- In react sample I'm enabling only the current header and on select, I am enabling add the item button.
Icons, I was not able to remove the edit icons.

Thanks for the help.

Marshal Marshal · Accepted Answer · 2019-03-26T17:21:26

You can do the following to accomplish this.

Disable add button:

Add a template reference of #verticalStepper to your stepper

<mat-vertical-stepper #verticalStepper

Add a template reference of #addButton to your button step

<mat-step #addButton>

Then compare the button step to the stepper selected, and disable button if they do not match.

<button mat-flat-button [disabled]="verticalStepper.selected != addButton" (click)="addItem()">

Use [completed] to control when the step is completed:

Add a template ref of #step to your step *ngFor loop, then if step.completed will pass true to the [completed] input.

<mat-step #step *ngFor="let step of newSteps; let i = index" [completed]="step.completed">

Then in your (change) event set step.completed = true

(change)="changeStep($event, i); step.completed = true">

Override edit icon

Add the following to replace the edit icon with step index.

<ng-template matStepperIcon="edit" let-index="index">
   {{index + 1}}
 </ng-template>

Stackblitz

https://stackblitz.com/edit/stepper-dynamic-qxh5qf?embed=1&file=src/app/app.component.html

Angular Mat Stepper enable only active navigation and completed navgation

1 Answers