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.

Fichu

Answer 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.

Archaeological

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

Answer 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.

Banky

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

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. – Banky

Answer 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)}

Felisafelise

Answer 4

Set editable to false for mat-step

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

Scriabin

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

Answer 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);

Compressibility

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

Answer 6

I tried this but not worked.

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

Then i tried this.

.mat-step-header {
            pointer-events: none !important;
        }

This worked absolutely fine .

Thank You

Agglomerate

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

Answer 7

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

Overwinter