angular material stepper: disable header navigation

Question

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()">.

Answer 1

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; } 

Answer 2

Use a linear stepper with completed=false steps. When the user presses your button, programattically complete the step and move to the next one.

This way you don't need to mess with CSS pointer events. In our app, that resulted in accessibility problems with NVDA.

    <mat-horizontal-stepper linear #stepper>       <mat-step completed="false">         <ng-template matStepLabel>Step 1</ng-template>         <app-some-child (nextClicked)="nextClicked($event)" ></app-some-child>       </mat-step>       <mat-step>         <ng-template matStepLabel>Step 2</ng-template>         <app-some-other-child></app-some-other-child>       </mat-step>     </mat-horizontal-stepper>          export class AppComponent implements OnInit {        @ViewChild('stepper') stepper: MatStepper;        nextClicked(event) {         // complete the current step         this.stepper.selected.completed = true;         // move to next step         this.stepper.next();       }     }