Reputation: 715
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:-
Thanks for the help.
Upvotes: -1
Views: 922
Reputation: 11101
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
Upvotes: 1