angularangular-material

angular material stepper: disable header navigation

I want to navigate the stepper only through the next and back buttons.

I can't get this to work since users can also click each step label to navigate to any step. I can't use linear, since it requires each step to have a formArray or FormGroup.

I have tried <mat-step (click)="$event.stopPropagation()">.

Solution

  • Add this to your style sheet. I was trying to disable the header navigation. Tried many things but this hack worked. You can try this till Angular Material Team support this feature.

    ::ng-deep .mat-horizontal-stepper-header{
    pointer-events: none !important;
}