How to disable a step in Angular Material Stepper?

11,012

Solution 1

To achieve this , You can disable the mat-stepper-header navigation.

And use click event to step ahead.

To disable the mat-stepper-header navigation use this css

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

This worked absolutely fine .

Thank You

Solution 2

You don't have to use forms to use the stepper. Note the following from the Angular Material documentation on the linear stepper:

Alternatively, if you don't want to use the Angular forms, you can pass in the completed property to each of the steps which won't allow the user to continue until it becomes true.

Without forms, you simply need to use your own logic and the stepper features to implement state etc.

Share:
11,012

Related videos on Youtube

Sid Raz
Author by

Sid Raz

Updated on June 04, 2022

Comments

  • Sid Raz
    Sid Raz almost 2 years

    I have 3 steps in an Angular Material horizontal stepper. I want to enable the first 2 by default but have the 3 step disabled (but not hidden).

    These steps don't necessary have form values which decide if the current step is valid or not. There are a series of backend calls that occur which decide if the current step is valid or not. The linear mode option looks like it would work but it seems to rely on their being a form with required values in order to determine if the form is valid or not. I don't have a form but still want the same type of functionality. Any ideas?

    https://stackblitz.com/angular/dqllekdmmly?file=app%2Fstepper-overview-example.ts

  • carecki
    carecki over 3 years
    This solution is not sufficient, as one can still navigate to any step using tab, left/right arrows and activate it with space/enter.