angular material stepper: disable header navigation

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()">.

15 Answers

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

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

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

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

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"] ... 

Does not work without ::ng-deep

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

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.

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

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.

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

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> <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]), }); 

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

I think, for now, the good way is to get the matStepper by a ViewChild and in the afterViewInit, add pointer-events style to none for each header.

@ViewChild('matStepper') matStepper: MatStepper; ... ngAfterViewInit() { this.matStepper._stepHeader.forEach((x) => { x._elementRef.nativeElement.style.pointerEvents = 'none'; }); } 

This solution avoid not recommended ::ng-deep or ViewEncapsulation

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

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

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

<mat-vertical-stepper linear>

In the tag add [linear]="true"

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