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.

score 13 · Answer 1 · answered Nov 07 '18 at 19:34

13

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.

answered Nov 07 '18 at 19:34

CAlex

1,140
2
14
28

1

Yeah, but your way can be easily countered by "inspect" tool and disabling css rule – Massaget Jan 08 '21 at 02:29

score 12 · Answer 2 · edited Sep 02 '19 at 08:36

12

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

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

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

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

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

And of course, enabled linear mode.

edited Sep 02 '19 at 08:36

Luigi Cerone

362
1
6
18

answered Mar 14 '19 at 04:10

voukvouk

121
1
3

1

How do you trigger the step 2.? What event do you use? – Maurici Abad May 20 '20 at 08:09
1

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. – voukvouk May 27 '20 at 11:02

score 7 · Answer 3 · answered Mar 08 '18 at 06:09

7

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

answered Mar 08 '18 at 06:09

satyendra kumar

719
2
10
19

score 4 · Answer 4 · edited Dec 06 '17 at 15:42

4

Set editable to false for mat-step

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

edited Dec 06 '17 at 15:42

Mel

5,837
10
37
42

answered Nov 15 '17 at 15:10

Milan

41
7

5

It doesn't worked in this case when the previous values are valid – Sathyamoorthy Ponnusamy Nov 15 '17 at 15:23

score 3 · Answer 5 · answered Dec 06 '17 at 15:41

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

thanks for this - If anyone else experiences an error that says the stepper is 'undefined', you can also subscribe in ngAfterViewInit — Farasi78, Sep 29 '20 at 20:21

score 1 · Answer 6 · answered Aug 14 '19 at 06:14

1

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

answered Aug 14 '19 at 06:14

Vishal Chavan

334
3
3

Yeah, but your way can be easily countered by "inspect" tool and disabling css rule – Massaget Jan 08 '21 at 02:29

score -1 · Answer 7 · answered May 26 '19 at 09:46

-1

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

answered May 26 '19 at 09:46

M Zishan

41
5

Angular Material - Prevent mat-stepper from navigating between steps

7 Answers7