Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material
Yes. It is possible to jump to a specific stepper by using selectedIndex
property of the MatStepper
. Also, MatStepper
exposes public methods next()
and previous()
. You can use them to move back and forth.
In your template:
Add an id to your stepper e.g. #stepper
. Then in your goBack()
and goForward()
methods, pass the stepper id:
<mat-horizontal-stepper #stepper>
<!-- Steps -->
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack(stepper)" type="button">Back</button>
<button (click)="goForward(stepper)" type="button">Next</button>
</div>
.. and in your typescript:
import { MatStepper } from '@angular/material/stepper';
goBack(stepper: MatStepper){
stepper.previous();
}
goForward(stepper: MatStepper){
stepper.next();
}
Link to stackblitz demo.
You can also use ViewChild
to get a reference to the stepper component in your TypeScript as shown below:
@ViewChild('stepper') private myStepper: MatStepper;
goBack(){
this.myStepper.previous();
}
goForward(){
this.myStepper.next();
}
In this case, you don't have to pass the stepper reference in the method in your component's html. Link to Demo with ViewChild
You can enable/disable the Back
and Next
buttons by using the following:
<button (click)="goBack(stepper)" type="button"
[disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button"
[disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>
In addition to @Faisal's answer, this is my take on making the MatStepper jump without needing to pass the stepper in the arguments.
This is helpful when you need more flexibility in manipulating the stepper e.g. from a Service
or something else.
HTML:
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
<button (click)="move(0)">1st</button>
<button (click)="move(1)">2nd</button>
<button (click)="move(2)">3rd</button>
<button (click)="move(3)">4th</button>
</div>
TS File:
move(index: number) {
this.stepper.selectedIndex = index;
}
Here's the stackblitz demo.
If you want to navigate programmatically to next step and if you are using a linear stepper, follow the below steps:
Create a
stepper
like this:<mat-horizontal-stepper linear #matHorizontalStepper>
Define
mat-step
like this:<mat-step [completed]="isThisStepDone">
From inside
mat-step
create a button to go to next step like this:<button (click)="next(matHorizontalStepper)">NEXT STEP</button>
In
.ts
file declare aMatStepper
reference named stepper :
@ViewChild('matHorizontalStepper') stepper: MatStepper;
Also, within
.ts
file initializeisThisStepDone
as false :isThisStepDone: boolean = false;
Then write method for NEXT STEP button named
next()
:submit(stepper: MatStepper) { this.isThisStepDone = true; setTimeout(() => { // or do some API calls/ Async events stepper.next(); }, 1); }
NOTE: The async part (setTimeout()
) is required due to state propagation via isThisStepDone.