mat-stepper web api call between steps

Question

I am using the mat-stepper from Angular material and would like to know if there is a way to prevent the stepper from moving on the next step until a web API call for saving the current form is returned.

I am using Reactive form and have validation in place which works great by preventing the user to go next until all elements pass validation. However, once this condition is satisfied I would like to block the Next button until my web API call to save the current form has returned successfully.

Thanks

Lateef Sofi Lateef Sofi · Accepted Answer · 2018-01-07T06:56:40

You have to create a handler in component and pass the step index like this:

HTML:

1. <mat-horizontal-stepper linear="true" #stepper>
2. <button mat-button matStepperNext (click)="ApiCallHandler(0)">Next</button>

Component:

1. @ViewChild('stepper') stepper;
  stepperHandler(index){
      this.stepper.selectedIndex = index;
  }
2. stepperHandler(index){
        this.stepperHandler(index);
        //Do ur Api call
        this.stepperHandler(index+1);
    }

Hope this will help you

mat-stepper web api call between steps

1 Answers