Stepper material : using stepper.reset() inside typescript

Question

Is it possible to use stepper.reset() inside the ts file? I would like to do someting like

    onCheckRef() {
    if (this.refFormGroup.get('reference').invalid) {
      this.stepper.reset();
    } else {
      .....................
    }
  }

In the template :

<button mat-button (click)="onCheckRef()" matStepperNext>Valider</button>

thank you

Answer 1

Yes You can access MatStepper Reference inside component using ViewChild decorator

First Define template reference variable in html using hash sympol

<mat-horizontal-stepper [linear]="isLinear" #stepper>
.....
</mat-horizontal-stepper>

Then inside component use ViewChild decorator to access stepper instance

 @ViewChild('stepper',{read:MatStepper}) stepper:MatStepper;

Finally you can access reset method

onCheckRef() {
    if (this.refFormGroup.get('reference').invalid) {
      this.stepper.reset();
    } else {
      .....................
    }
  }

Working Example