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.

Solution 1

What you originally posted:

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

does work, as long as you add ::ng-deep to the CSS class. Like this:

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

Also make sure you are using the horizontal stepper instead of the vertical one. This obviously matters when calling the appropriate CSS class.

Solution 2

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.

Solution 3

To get event on header click use this-

<mat-horizontal-stepper (selectionChange)="stepClick($event)" [linear]="isLinear" #stepper="matHorizontalStepper">

In ts file the component -

stepClick(ev) {console.log(ev)}

Solution 4

Set editable to false for mat-step

<mat-step editable="false"> ... </mat-step>

Solution 5

To fire a function when clicking the stepper header, you can subscribe to MatStepper.selectionChange. It is emitted when switching steps and gives you information about the previous step and the selected step.

html:

<mat-horizontal-stepper #stepper[linear]="true">
  <mat-step label="firstStep">
    ...
  </mat-step>
</mat-horizontal-stepper>

ts:

class ExampleComponent implements OnInit {
  @ViewChild('stepper') stepper: MatStepper;

  ngOnInit() {
    this.stepper.selectionChange.subscribe(selection => {
       console.log(selection.selectedStep)
       console.log(selection.previouslySelectedStep)
    }
 }

When the selected step is the last one, you could use this to set editable = false in all the previous steps:

this.stepper._steps.forEach(step => step.editable = false);

View more solutions

Comments

[Sathyamoorthy Ponnusamy]

It doesn't worked in this case when the previous values are valid

[Maurici Abad]

How do you trigger the step 2.? What event do you use?

[voukvouk]

I have a button which will call function that will (along with other functions I need) trigger the following: this.stepper.selected.completed = true; this.stepper.next(); So this will jump to the subsequent step.

[Farasi78]

thanks for this - If anyone else experiences an error that says the stepper is 'undefined', you can also subscribe in ngAfterViewInit

[Massaget]

Yeah, but your way can be easily countered by "inspect" tool and disabling css rule

[Massaget]

Yeah, but your way can be easily countered by "inspect" tool and disabling css rule