Support disabling steps in the Stepper

[dmiko1994]

Description: I am submitting a feature request to add a simple [disable] property to a mat-step. This would allow you to pass in a boolean that's maintained in your component to disable or enable a mat-step dynamically.

Use Case: I've come across a situation where I need to navigate to the third step of a horizontal stepper on 'view'. So basically skip all the creation and editing steps and just go straight to the step that shows my summary of what I've done. I searched for a while to try to find a nice way to disable a mat-step. People were suggesting using the [completed] or [editable] properties but none of those disabled the step. I was able to still navigate to it if and edit fields if I clicked on it. What I ended up doing was dynamically hiding the headers using css and [ngClass]. Obviously this is a bit of a hacky workaround and I'd love to just be able to disable the step by passing it a 'viewMode' boolean which I'm doing for other areas of the component to show and hide content I want the user to see based on what mode they're in. The UX designers at my company want to be able to see the other steps even though we wouldn't be able to navigate to them to keep the same look and feel. So essentially just make the header of the mat-step not clickable. I've hidden all the headers now as a temporary solution when user is in viewMode. Another problem with my workaround is I'm having to add a bunch of other styles that will be applied in viewMode because the headers take up a good 1/8th of my MatDialog so when they're not there, I found that I had to use [ngClass] in multiple areas.

I hadn't found a better workaround then [ngClass] for this problem I'm having. If anyone has a better solution, I'd love to hear it.

Thanks

Don Miko

[ggonzalez94]

Any update on this? I have also come across scenarios where this feature would be incredible useful.

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[arodr967]

Just gave this a thumbs-up. Not sure if that's how we vote. This feature would be incredibly useful!

[nlc540]

Any updates in this issue?

[Selerium]

People were suggesting using the [completed] or [editable] properties but none of those disabled the step. I was able to still navigate to it if and edit fields if I clicked on it.

I tried using [completed]="false" and it's given me the result I wanted. I have multiple steps visible, none clickable, and the one active highlighted (which I can change using [selectedIndex]="x" where x is any value I want it to be at).

I feel like this is pretty sufficient for the issue for now?

[KacperMalachowski]

[completed]="false" won't work if the "disabled" step is next to the active one.

Even without that, I just like the style of disabled step provided by default. Watching for that feature as well.

EDIT: Workaround is to use [optional]="true" based on condition and step.select().

[completed]="!skipRouteSelection"
[editable]="!skipRouteSelection"
[optional]="skipRouteSelection"

setTimeout(() => this.stepper!.steps.get(2)?.select(), 1);

[ferisso]

Any updates?