<mat-vertical-stepper>
<mat-step label="Agreement Preparation">
<p>Agreement preparion is intiated by our side </p>
</mat-step>
<mat-step label="Ready for Biometric" selected active>
<p>Agreement preparion is intiated by our side </p>
</mat-step>
<mat-step label="Document in Submission">
<p>Agreement preparion is intiated by our side </p>
</mat-step>
i tried setting active and selected but it does not work.
For each mat-step , the stepControl attribute can be set to the top level AbstractControl that is used to check the validity of the step. There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step.
There are three main types of stepper motors: Permanent magnet stepper. Variable reluctance stepper. Hybrid synchronous stepper.
Add a reference to your stepper e.g. #stepper
and after the view initializes, set the selectedIndex
of stepper
to 1.
In your Template:
<mat-vertical-stepper #stepper>
<mat-step label="Agreement Preparation">
<p>Agreement preparion is intiated by our side </p>
</mat-step>
<mat-step label="Ready for Biometric">
<p>Agreement preparion is intiated by our side </p>
</mat-step>
<mat-step label="Document in Submission">
<p>Agreement preparion is intiated by our side </p>
</mat-step>
</mat-vertical-stepper>
... and in your Typescript:
import { ViewChild, AfterViewInit } from '@angular/core';
import { MatStepper } from '@angular/material';
Component({
.....
})
export class ComponentClass implements AfterViewInit {
@ViewChild('stepper') stepper: MatStepper;
ngAfterViewInit() {
this.stepper.selectedIndex = 1;
}
}
Link to StackBlitz demo.
For anyone still viewing this, this is how I did it without implementing AfterViewInit
.
<div *ngIf="!processing">
<mat-vertical-stepper linear [selectedIndex]="currentStep">
<mat-step label="Step 1">Step 1</mat-step>
<mat-step label="Step 2">Step 2</mat-step>
<mat-step label="Step 3">Step 3</mat-step>
<mat-step label="Step 4">Step 4</mat-step>
</mat-vertical-stepper>
</div>
My ts file:
ngOnInit() {
this.processing = true;
setTimeout(() => {
this.currentStep = 2;
this.processing = false;
}, 1500);
}
This setTimeout()
is used to simulate an api call that takes some time. This helps you show the stepper only when you're sure you know which index you would like to set active.
Use attribut selectedIndex
in mat-horizontal-stepper for default
Ex:
<mat-horizontal-stepper [linear]="isLinear" #stepper selectedIndex="2">
<mat-label></mat-label>
</mat-horizontal-stepper>
Note: start index with 0 (ZERO)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With