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

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