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?

score 9 · Accepted Answer · edited Oct 23 '18 at 03:50

9

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();
  }

edited Oct 23 '18 at 03:50

T04435

12,507
5
54
54

answered Nov 10 '17 at 17:05

Rafael Gil

151
3

1

Only thing I had to add the stepper parameter into the onNext() call, i.e. `` – hansi Nov 16 '17 at 21:15
exactly, sorry to miss that one. – Rafael Gil Nov 21 '17 at 16:51
This presents a problem for testing; you need to be able to get the stepper reference in order to pass it into that function. – ocket8888 Apr 29 '21 at 18:35

Angular material: Programmatic "next" for linear stepper

1 Answers1