I have a question regards Angular Material (with Angular 4+). Say in my component template I add a <mat-horizontal-stepper>
component, and within each step <mat-step>
I have stepper buttons to navigate the component. Like so…
<mat-horizontal-stepper>
<mat-step>
Step 1
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 2
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
<mat-step>
Step 3
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</mat-step>
</mat-horizontal-stepper>
Now I am wondering if it is possible to remove the buttons out of each step and have them elsewhere in the <mat-horizontal-stepper>
in a static position or even outside the <mat-horizontal-stepper>
and I can navigate backwards and forwards using code within my component typescript file. To give an idea, I would like my HTML be something like this
<mat-horizontal-stepper>
<mat-step>
Step 1
</mat-step>
<mat-step>
Step 2
</mat-step>
<mat-step>
Step 3
</mat-step>
<!-- one option -->
<div>
<button mat-button matStepperPrevious type="button">Back</button>
<button mat-button matStepperNext type="button">Next</button>
</div>
</mat-horizontal-stepper>
<!-- second option -->
<div>
<button (click)="goBack()" type="button">Back</button>
<button (click)="goForward()" type="button">Next</button>
</div>
Best Answer
Yes. It is possible to jump to a specific stepper by using
selectedIndex
property of theMatStepper
. Also,MatStepper
exposes public methodsnext()
andprevious()
. You can use them to move back and forth.In your template:
Add an id to your stepper e.g.
#stepper
. Then in yourgoBack()
andgoForward()
methods, pass the stepper id:.. and in your typescript:
Link to stackblitz demo.
You can also use
ViewChild
to get a reference to the stepper component in your TypeScript as shown below: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
andNext
buttons by using the following: