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 can't use linear, since it requires each step to have a formArray or FormGroup.

I have tried <mat-step (click)="$event.stopPropagation()">.

Did you have any success with finding a solution? – Deniss M. Nov 02 '17 at 21:35 — Deniss M., Nov 02 '17 at 21:35

score 124 · Accepted Answer · edited Aug 07 '19 at 13:04

124

Add this to your style sheet. I was trying to disable the header navigation. Tried many things but this hack worked. You can try this till Angular Material Team support this feature.

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

edited Aug 07 '19 at 13:04

muhammad kashif

2,566
3
26
49

answered Nov 06 '17 at 17:59

Shahzaib Shahid

1,341
1
8
6

2

This does not work, I can still navigate to previous step with the header – Mel Dec 06 '17 at 10:22
8

@Mel Kindly add this chunk of code at the end of your main style.css or style.scss. It will work – Shahzaib Shahid Dec 07 '17 at 09:01
1

@ShahzaibShahid Why does adding it to the component's scss file not work? Why does it have to be the shared style.scss file? – Ka Mok Mar 12 '18 at 19:53
@KaMok it's because we are overwriting the CSS for the specified class so it should be at the parent level so it can be overwritten. – Shahzaib Shahid Mar 13 '18 at 07:07
@ShahzaibShahid You will also need to manually set the tabindex attributes of the stepper-headers to '-1' so you can't tab to the steps with a keyboard – EvenStevens Apr 06 '18 at 09:27
3

it works if u use ng-deep: ::ng-deep .mat-horizontal-stepper-header {...} – Engam Nov 14 '18 at 08:24
Very usefull, just by passing by css, Thanks – Omar Amaoun Aug 29 '20 at 16:58
Yes it works unless you are using a vertical stepper in which case its ::ng-deep .mat-vertical-stepper-header{ pointer-events: none !important; } – Darren Street Mar 07 '23 at 15:26

score 74 · Answer 2 · edited Nov 12 '20 at 16:00

74

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.

    <mat-horizontal-stepper linear #stepper>
      <mat-step completed="false">
        <ng-template matStepLabel>Step 1</ng-template>
        <app-some-child (nextClicked)="nextClicked($event)" ></app-some-child>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Step 2</ng-template>
        <app-some-other-child></app-some-other-child>
      </mat-step>
    </mat-horizontal-stepper>
    
    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();
      }
    }

edited Nov 12 '20 at 16:00

raaaay

496
7
14

answered Feb 18 '19 at 20:53

James Young

1,372
13
16

11

This is the proper way to do it. – Mickers Apr 19 '19 at 13:50
8

Cool solution! Note that it will not prevent the user to go back to first step once he is at the second step (and that may be something you need) For this you can add `editable="false"` to your `mat-step`s – dekajoo Oct 24 '19 at 12:45
Nice solution here! Thank you – AGrammerPro Sep 08 '20 at 12:55
1

Bad solution, it doesn't disable "next" steps, previous steps don't become grayed out. Css is more right solution, – roma2341 Feb 22 '22 at 08:30
Great answer and proper way to implement – Kumaresan Sd Mar 25 '22 at 04:42
Seems obvious but if you don't set the selected step as completed the stepper won't move. If you want to disable the previous step you can also set the `this.stepper.selected.editable = false` – Low Oct 27 '22 at 06:02

score 8 · Answer 3 · edited Nov 12 '20 at 15:59

8

Does not work without ::ng-deep

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

edited Nov 12 '20 at 15:59

raaaay

496
7
14

answered Jan 10 '19 at 00:37

Suliman Farzat

1,197
11
12

score 8 · Answer 4 · answered Oct 04 '19 at 19:58

Don't use ::ng-deep as it is deprecated.

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

Instead, if you are using Angular Material, use the theme guide from the documentation.

https://material.angular.io/guide/theming

Example of a implementation of the style:

my-custom-elements.scss

@import '~@angular/material/theming';

@mixin custom-stepper-theme() {
  .mat-horizontal-stepper-header {
    pointer-events: none;
  }
}

global-material-theme.scss

@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

@import './material/my-custom-elements.scss';

@include custom-stepper-theme();

angular.json

...
"styles": ["src/styles.scss", "src/app/global-material-theme.scss"]
...

Put a different class on it. And use the class specification (then you can define the mixin inside the scss of that component, its a better code practice to say it is a specific style) — Jorge Mussato, Apr 20 '20 at 18:38

kaiilim · Answer 5 · 2020-11-22T09:35:26.383

8

For anyone that's still looking for an alternate solution if ::ng-deep does not work.

Furthermore, ::ng-deep is deprecated and setting ViewEncapsulation to none is the preferred way to go if you want to do it using CSS.

Import ViewEncapsulation and set to None in your

compnent.ts:

import { Component, OnInit, ViewEncapsulation } from "@angular/core";

@Component({
  selector: "stepper-overview-example",
  templateUrl: "stepper-overview-example.html",
  styleUrls: ["stepper-overview-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class StepperOverviewExample implements OnInit {
  isLinear = false;

  constructor() {}

  ngOnInit() {}
}

set pointer-events to none in your

component.css:

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

Here's a DEMO.

edited Nov 22 '20 at 09:35

answered Oct 25 '19 at 08:22

kaiilim

579
12
31

Thank you! I had a nested stepper and the encapuslation property you mention here made all the difference (y) – lucniner Feb 10 '21 at 08:08
ViewEncapsulation None is not a good idea. That should be reserved for the ultimate "no other possible option" scenario. The side effects will not be obvious, and you will find them in the form of bugs over a long period of time. Lots of weird issues with styles being picked up and/or applied in all the wrong places. Just do some serious spot-checking throughout your entire app before releasing it if you chose this route. – mwilson Oct 26 '22 at 20:05

score 5 · Answer 6 · answered Dec 28 '18 at 18:18

Just to improve on the accepted answer, as it will not work if you have a vertical stepper.

To stop the user being able to click the header and navigate add the following code to you style.css file in the root:-

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

This will ensure it works for mat-horizontal-stepper-header and mat-vertical-stepper-header

score 3 · Answer 7 · answered Nov 06 '17 at 12:44

I found a somewhat hacky solution for this. The problem is that you cannot fully disable the header navigation, but you can prevent it from being active until a certain moment.

And that moment is form.invalid.

My situation was the following: User needs to fill the form inside the step, press 'save' and only then be able to use NEXT button and navigate the stepper further (also back).

What I did was introduce another hidden input which would be using angular's [required] dynamic attribute. It will only be required if the previous save condition wasn't successful. Once it succeeds this field won't be required and user can navigate further.

Together with mat-stepper (or md-stepper) attribute editable you should be able to achieve what you want.

Let me know if you fully understood the idea.

khizer · Answer 8 · 2023-03-13T12:53:25.427

This also did the trick for me

Requirement:

Allow navigation either from Navigation or Next Button only WHEN form is valid
Disabled Header navigation and keep button disabled till form is not valid.


 <mat-horizontal-stepper #stepper [linear]="true">

    <!----------------------------->
    <!---- STEP: 1:---->
    <!----------------------------->

    <mat-step #generalStep [completed]="formGroup1.valid">
      <ng-template matStepLabel>Step-1</ng-template>
      
      <form [formGroup]="formGroup1">

      // STEP-1 Content
      // matInput - with form control bindings

       <div class="container">
          <button mat-raised-button matStepperNext color="primary"[disabled]="!formGroup1.valid">Next Step</button>
        </div>

      </form>

    </mat-step>

    <!------------------------------->
    <!-- STEP: 2:-->
    <!------------------------------->


    <mat-step #generalStep [completed]="formGroup2.valid">
      <ng-template matStepLabel>Step-2</ng-template>

      <form [formGroup]="formGroup2">

      // STEP-2 Content
      // matInput - with form control bindings

      <button mat-raised-button matStepperNext color="primary"[disabled]="!formGroup.valid">Next Step</button>

      </form>
    </mat-step>

  
  </mat-horizontal-stepper>

FormGroup/FormControl initialization
Adding Validators

  formGroup1: FormGroup;
  formGroup2: FormGroup;

   this.formGroup1 = this.formBuilder.group({
      control1: new FormControl('', [Validators.required]),
      control2: new FormControl('', [Validators.required]),
    });

  this.formGroup2 = this.formBuilder.group({
    control3: new FormControl('', [Validators.required]),
    control4: new FormControl('', [Validators.required]),
  });

score 2 · Answer 9 · answered May 31 '22 at 17:14

Following works for me with click on previous step enabled:

::ng-deep .mat-vertical-stepper-header:not([ng-reflect-active="true"]){
    pointer-events: none !important;
}

For horizontal stepper do this:

::ng-deep .mat-horizontal-stepper-header:not([ng-reflect-active="true"]){
        pointer-events: none !important;
}

score 1 · Answer 10 · answered Feb 25 '19 at 05:58

First you need add ViewEncapsulation.None in your component config

@Component({
 selector: 'app-example',
 encapsulation: `ViewEncapsulation.None`
 })

Then add this in your component CSS.

.mat-horizontal-stepper-header-container  {
  display: none !important;
 }

score 0 · Answer 11 · answered Feb 22 '19 at 05:51

0

Here ::ng-deep .mat-horizontal-stepper-header-container { display: none ; }

Use this on your style sheet to remove stepper header...Like Step-1,Step-2

answered Feb 22 '19 at 05:51

Dharshan PLUV

33
7

score 0 · Answer 12 · answered Aug 08 '23 at 13:33

// so that the User cannot go directly to step 3
.mat-step-header.mat-accent[ng-reflect-index="2"] {
  pointer-events: none !important;
}

This is preventing the Users to go to step 3 from a 3 steps stepper. Change the index accordingly for your project, meaning that if you want to disable step 5, make the index equal to 4. Also, put this in some sort of a Material Overrides file, or directly in your styles.scss file.

score -4 · Answer 13 · answered Oct 29 '17 at 19:19

-4

You need to add an "linear" attribute (This will disable navigation)

<mat-vertical-stepper linear>

answered Oct 29 '17 at 19:19

Алексей Като

9
2

1

cause error `Cannot read property 'invalid' of undefined` when clicking next and back buttons, or the header labels. To use `linear` means to add forms which is the basic idea of the stepper... but I don't need a form for each step – Shaniqwa Oct 31 '17 at 09:22

score -4 · Answer 14 · answered Jan 21 '19 at 17:22

-4

In the tag add [linear]="true"

<mat-horizontal-stepper labelPostion="botton" [linear]="true">
...
</mat-horizontal-stepper>

answered Jan 21 '19 at 17:22

Zelmar Ramirez

1
2

angular material stepper: disable header navigation

14 Answers14

Linked