Ben jamin :
Ok, it seems I found a solution (but it is not stated anywhere on the API).\n\n\nAdd a reference to the stepper, then add ViewChild with the reference in your component typescript file.\nCreate a method to change the index of the stepper.\n\n\nHTML: \n\n<mat-horizontal-stepper [linear]=\"true\" #stepper>\n <!-- Content here -->\n</mat-horizontal-stepper>\n\n\nTS: \n\nimport { Component, ViewChild } from '@angular/core';\n@Component({\n // ...\n})\nexport class AppComponent {\n @ViewChild('stepper') stepper;\n\n /**\n * Changes the step to the index specified\n * @param {number} index The index of the step\n */\n changeStep(index: number) {\n this.stepper.selectedIndex = index;\n }\n}\n",
2017-09-27T06:26:26
FAISAL :
\n It is possible to jump to a specific stepper. MatStepper exposes a\n public property selectedIndex which specifies the currently selected\n step index. It can be set. The index starts at 0.\n\n\nIn your template: \n\nAdd 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: \n\n<mat-horizontal-stepper [linear]=\"isLinear\" #stepper>\n <!-- Your other steps here -->\n <mat-step [stepControl]=\"secondFormGroup\">\n <!-- Content in the step -->\n <div>\n <!-- Other actions here --> \n <button mat-button (click)=\"resetStepper(stepper)\">Reset</button>\n </div>\n </mat-step>\n <!-- More steps here -->\n</mat-horizontal-stepper>\n\n\n.. and in your typescript:\n\nimport { MatStepper } from '@angular/material';\n\nexported YourOwnComponent {\n\n constructor() {}\n\n resetStepper(stepper: MatStepper){\n stepper.selectedIndex = 0;\n }\n}\n\n\nStackblitz demo",
2017-09-27T07:08:34