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 c

Answer 1

Just to improve on the accepted answer, as it will not work if you have a vertical stepper.

To stop the user being able to click the header and navigate add the following code to you style.css file in the root:-

.mat-step-header {
  pointer-events: none !important;
}

This will ensure it works for mat-horizontal-stepper-header and mat-vertical-stepper-header

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

Answer 3

For anyone that's still looking for an alternate solution if ::ng-deep does not work.

Furthermore, ::ng-deep is deprecated and setting ViewEncapsulation to none is the preferred way to go if you want to do it using CSS.

Import ViewEncapsulation and set to None in your

compnent.ts:

import { Component, OnInit, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "stepper-overview-example",
  templateUrl: "stepper-overview-example.html",
  styleUrls: ["stepper-overview-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class StepperOverviewExample implements OnInit {
  isLinear = false;

  constructor() {}

  ngOnInit() {}
}

set pointer-events to none in your

component.css:

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

Here's a DEMO.

Answer 4

First you need add ViewEncapsulation.None in your component config

@Component({
 selector: 'app-example',
 encapsulation: `ViewEncapsulation.None`
 })

Then add this in your component CSS.

.mat-horizontal-stepper-header-container  {
  display: none !important;
 }

Answer 5

In the tag add [linear]="true"

<mat-horizontal-stepper labelPostion="botton" [linear]="true">
...
</mat-horizontal-stepper>