Mat Stepper needs a beforeSelectionChange event
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
There should be an event that is triggered when you attempt to navigate to a different step via the mat stepper header.
Currently, there is only a `selectionChange` event that doesn't get triggered until _after_ the next navigation takes place.
### Use Case
In my scenario, when a user attempts to navigate to the next step, I need to first call an endpoint to validate the data they entered. Once I have validated that the data is correct, I can proceed to the next step with `stepper.next()`. This works as expected if the user clicks on my next button with a custom `(click)` event, but if they click on the header to navigate, there is no way to call the endpoint before navigation.
Using `selectionChange` does not work, because there is no way to prevent navigation after the `StepperSelectionEvent` has happened.
Alternatively, instead of a `beforeSelectionChange` event, if there were a way to prevent the next navigation when subscribing to the `selectionChange` event, that would also work. Or if there was a way to prevent navigation from the header, but still capture clicks, so that `stepper.next` could manually be called.
Contributor guide
Research direction
Start with the mat stepper header navigation and the existing selectionChange event, then compare that flow with the stepper.next() entry point described in the issue. The change is complete when header navigation can be validated or prevented before selection, while programmatic next-step navigation continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100