Angular Material selectionChanged returning previous step instead of current

Question

I have a page consisting of two columns. One contains a vertical stepper and the other one should contain a description for each step. I want to update this description according to the current step and therefore listen to the selectionChange-Event. The problem is, that I get the previously chosen step when I look for the selectedIndex, not the one I am now on.

HTML:

<div class="row"> <div class="col-7 stepperColumn"> <mat-vertical-stepper (selectionChange)="onStepChange(eventCreationStepper)" #eventCreationStepper> <!--some steps--> </mat-vertical-stepper> </div> <div class="col-5"> <!--some descriptions--> </div> </div>

JS:

public onStepChange(stepper: MatStepper) { console.log(stepper.selectedIndex); }

Answer 1

At first this seems like odd behaviour, but after thinking about it I realise it's because you're passing through the template ref before you've changed the step, so the object that arrives in your method is still pointing at the previous step.

It looks like the solution is to grab the new index from the event object that is passed by the selectionChange method, like this:

HTML:

<mat-vertical-stepper (selectionChange)="onStepChange($event)">

TS:

public onStepChange(event: any): void {
  console.log(event.selectedIndex);
}

This should solve your problem.