Angular material: Programmatic "next" for linear stepper

Question

I want to use the angular material stepper but I need to do some asynchronous service call before proceeding to a second step. How can I achieve this? I could add a click handler to the next button but that will not wait for the async call to come back and proceed anyway. Here is a plnkr.

In the html template I would have the button:

  <button mat-button matStepperNext (click)="onNext()">Next</button>

In the component:

  onNext() {
     let promise = service.validateData()
  }

Is there a way using the completed step attribute?

Answer 1

First you can include a indentifier to your stepper,

<mat-horizontal-stepper #stepper linear>

next you can change the step button to a normal one:

<button mat-button (click)="onNext(stepper)">Next</button>

On your component you can call your service and call the step advance (note that you need to include the MatStepper from '@angular/material')

onNext(stepper: MatStepper) {
     let promise = service.validateData();
     stepper.next();
  }