How to disable a step in Angular Material Stepper?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

i need to stop thechanges on previous completed step

Answer 4

Use the Completed Stepp, using any condition to set it as true or false , this is the info in Material Angular

https://material.angular.io/components/stepper/overview#completed-step

Completed step
By default, the completed attribute of a step returns true if the step is valid (in case of linear stepper) and the user has interacted with the step. The user, however, can also override this default completed behavior by setting the completed attribute as needed.