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

Don't use ::ng-deep as it is deprecated.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Instead, if you are using Angular Material, use the theme guide from the documentation.

https://material.angular.io/guide/theming

Example of a implementation of the style:

my-custom-elements.scss

@import '~@angular/material/theming';

@mixin custom-stepper-theme() {
  .mat-horizontal-stepper-header {
    pointer-events: none;
  }
}

global-material-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-stepper-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...