angular material stepper: disable header navigation
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;
}
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();
}
}