Angular 4 & Material Stepper

Question

Is it possible to reset (or just jump to the first step) inside of a stepper? It is not documented in the docs, but is it possible to do so? It is stated in the docs that the stepper is built on "CDK Stepper" (link?), but I can't find any examples which lead me to my goal.

Answer 1

Ok, it seems I found a solution (but it is not stated anywhere on the API).

1. Add a reference to the stepper, then add ViewChild with the reference in your component typescript file.
2. Create a method to change the index of the stepper.

HTML:

<mat-horizontal-stepper [linear]="true" #stepper>     <!-- Content here --> </mat-horizontal-stepper> 

TS:

import { Component, ViewChild } from '@angular/core'; @Component({     // ... }) export class AppComponent {     @ViewChild('stepper') stepper;      /**      * Changes the step to the index specified      * @param {number} index The index of the step      */     changeStep(index: number) {         this.stepper.selectedIndex = index;     } } 

Answer 2

It is possible to jump to a specific stepper. MatStepper exposes a public property selectedIndex which specifies the currently selected step index. It can be set. The index starts at 0.

In your template:

Add an id to your stepper e.g. #stepper. Then add a button in your step, and pass the stepper id in a function on (click) like below:

<mat-horizontal-stepper [linear]="isLinear" #stepper>     <!-- Your other steps here -->     <mat-step [stepControl]="secondFormGroup">         <!-- Content in the step -->         <div>             <!-- Other actions here -->                              <button mat-button (click)="resetStepper(stepper)">Reset</button>         </div>     </mat-step>     <!-- More steps here --> </mat-horizontal-stepper> 

.. and in your typescript:

import { MatStepper } from '@angular/material';  exported YourOwnComponent {    constructor() {}    resetStepper(stepper: MatStepper){      stepper.selectedIndex = 0;   } } 

Stackblitz demo