Angular stuff stepper: disable header navigation

Question

I want to navigate the stepper only through the Forward and Back buttons.

I cannot get this to work, since users can also click the shortcut of each step to go to any step. I cannot use linear, as each step requires formArray or FormGroup .

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

Answer 1

Add this to your stylesheet. I tried to disable header navigation. I tried a lot, but this hack worked. You can try this until the Angular Material Team supports this feature.

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

Answer 2

Use the linear stepper with steps completed=false . When the user clicks your button, programmatically complete the step and continue to the next.

This way you do not need to mess with CSS pointer events. In our application, this led to problems with the availability of 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(); } } 

Answer 3

Doesn't work without :: ng-deep

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

Answer 4

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

To prevent the user from clicking the title and navigating, add the following code to the style.css file in the root directory: -

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

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

Answer 5

I found several hacking solutions for this. The problem is that you cannot completely disable header navigation, but you can prevent it from being activated until a certain point.

And this moment is form.invalid .

My situation was the following: the user needs to fill out the form inside the step, click "save" and only after that use the NEXT button and move further along the step (also back).

What I did was enter another hidden input that will use the dynamic attribute angular [required] . This will only be required if the previous save condition was not successful. Once this happens, this field will not be required and the user will be able to move on.

Together with the mat-stepper (or md-stepper) editable attribute, you can achieve what you want.

Let me know if you fully understood this idea.

Answer 6

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

Use this in your stylesheet to remove the step header ... Like Step-1, Step-2

Answer 7

First you need to add ViewEncapsulation.None to your component configuration

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

Then add this to your CSS component.

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

Answer 8

Do not 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 topic guide from the documentation.

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

An example implementation of the style:

my custom is 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"] ... 

Answer 9

You need to add a “linear” attribute (this will disable navigation)

<mat-vertical-stepper linear>

Answer 10

Add [linear] = "true" to the tag

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