1

I'm using a stepper with dynamic forms in each step. I have created methods for back and next button which I call on click of next and back button like this:

 <button (click)="previousStage()" mat-raised-button matStepperPrevious>BACK</button>
 <button mat-raised-button matStepperNext (click)="nextStage()">Next</button>

Now I also want to move backward and forward when user clicks on header navigation so I have created a method for that as well:

 <mat-horizontal-stepper [linear]="true (selectionChange)="onNavChange($event)">

Inside the onNavChange(event) .. I call the method next or sub depending on the step name.

The problem is that when I click on next button then it is called twice... first it calls the onNavChange($event) and then the method called on next button.

How can I ensure that it is called only once? Is there a way that onNavChange() gets executed only when clicked on header?

Sunil Ojha
  • 223
  • 1
  • 7
  • 20

3 Answers3

0

Without seeing your full or example nextStage($event) method I analyze the issue. However, I use in my templates (click.prevent). In your example try 

<button mat-raised-button matStepperNext (click.prevent)="nextStage()">Next</button>

Also, what checks are doing for the currentStep? That way when you're on the currentstep you only navigate.

Thomas Cayne
  • 1,132
  • 8
  • 15
0

A possible solution will be to get a hold of the stepper using ViewChild:

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

Now you can use the observable itself, and use RXJS operators in order to filter the dobule request:

stepper.selectionChange.pipe(take(1)).subscribe(console.log)
Eliran Eliassy
  • 1,590
  • 12
  • 25
0

Thanks for the help but it was an easy solution. This is what I did: 1. Removed function calls from Next and Previous buttons. I kept matStepperPrevious for back and matStepperNext for next button. 2. Called the desired method only on selectionChange().

I noticed that selectionChange() is invoked when there is a change in the step and this can happen on click of either the header or buttons so I called my function only on selectionChange().

Sunil Ojha
  • 223
  • 1
  • 7
  • 20