How to control switching steps when the user click's on the indicator

Question

I need to add some logic in order to decide whether the user can change the step by clicking the indicator ( the step number ) or not. I'm trying to find if there's some callback that fires every step change but also lets you prevent changing the step if needed.

thanks

Answer 1

You can control whether to navigate to step or not, by using [editable] property on the mat-tab element.

<mat-stepper linear #stepper>
  <mat-step [stepControl]="firstFormGroup">
    ...
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" [editable]="isEditable">
    ...
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    ...
  </mat-step>
</mat-stepper>

In above example, you cannot move to 2nd tab directly if isEditable is false.

Stackblitz