Angular Material Stepper component prevent going to all the non visited steps

Question

I'm using the Angular Material Stepper component.

Within my content I have separate buttons that helps the user to move to the next step once the task in the current step is complete.

I want to prevent the user from visiting the next steps by clicking the step buttons of the stepper component.

However, I want the user to be able to go back to a previous step via the step buttons of the stepper component.

I'm not using form inside the stepper. I've seen the Linear property of the component, but it does not suit my requirement.

In brief, prevent the user from going to the "unvisited" steps by clicking the step buttons of the stepper component.

Answer 1

The solution that I found to this problem is to use completed attribute of step. Refer to the line of code given below:

<mat-step [completed]="isCompleted">

When isCompleted is true it will enable the next step.

Note: For this to work, the stepper component must be in the linear mode. This can be done by setting the attribute linear on the stepper component, like

<mat-horizontal-stepper linear>