CODEWITHSUNDEEP
angular-material2
Pascal
Pascal

Reputation: 167

mat-stepper web api call between steps

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

Upvotes: 1

Views: 2142

Answers (1)

Lateef Sofi
Lateef Sofi

Reputation: 11

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

Upvotes: 1

Related Questions