Angular Material - Prevent mat-stepper from navigating between steps

user_8563404 0
Viewed 32385

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.

angular-material-stepper angular-material2 angular-material angular
7 Answers

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.

user_83845880

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

  1. In the .ts file, corresponding action will trigger the following:
this.stepper.selected.completed = true;
this.stepper.next();

And of course, enabled linear mode.

user_67387720

Set editable to false for mat-step

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

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

user_118956220

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

user_79811970
Related