angular/components

Add `completed` event for stepper / steps

Open

#12908 opened on Aug 30, 2018

View on GitHub
 (18 comments) (6 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P4area: cdk/stepperarea: material/stepperfeaturegood first issuehelp wanted

Description

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

Optionally allow the consumer define if it wants to auto-advance an step when it completes (by using [completed] step property)

What is the current behavior?

Nothing happens as soon the step is marked as completed

What is the use-case or motivation for changing an existing behavior?

Use Observable based state such as NgRx stores, and in a more functional way allow set the stepper navigation based on state, now I have to subscribe to store and call navigation via an stepper instance in order to handle steps advance, too imperatively and also results in a awful timing issues because when stepper.next() is called and [completed] property update is on its way nothing happens.

Is there anything else we should know?

I'm willing to implement such feature. No breaking changes would be introduced.

Contributor guide

Tech stack
typescripthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular basicsUnderstanding of stepper component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the current stepper component in the Angular Material repository, specifically the step and stepper directives (e.g., stepper.ts and step.ts). Add a new @Output() completed event emitter to the Step component that emits when the step becomes completed. Ensure proper documentation and unit tests are added to verify the event fires correctly. Consider the interaction with the [completed] input and potential auto advance behavior.