angular material stepper: disable header navigation

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

Solution 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();
      }
    }