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

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.

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