Angular Material - Prevent mat-stepper from navigating between steps

Question

I have a mat-horizontal-stepper where I set linear property as true. When all the steps are valid as of now I can navigate to previous steps by clicking the header or label. I don't want that property.

I need to navigate only through buttons.

I tried disabling pointer function with:

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

but it didn't worked.

I need either to stop navigating by clicking header or fire a function on clicking the stepper header.

Answer 1

i had a similar issue as you had, and what i did was:

1. In html, I configured [editable] and [completed] as false

<mat-step [completed]="false" [editable]="false">

2. In the .ts file, corresponding action will trigger the following:

this.stepper.selected.completed = true;
this.stepper.next();

And of course, enabled linear mode.