The ngs-headless-stepper component provides step state, validation, progress, and navigation methods without rendering a fixed stepper header. Use it when a product workflow needs a custom visual layout while still sharing NgStarter step behavior.
Use the visual Stepper when the default wizard UI fits. Use Headless Stepper for custom onboarding, checkout, setup, and form flows with app-specific progress indicators, headers, or responsive layouts.
| Prop | Type | Default |
|---|---|---|
linear Whether users must complete the active step before moving to the next step. | boolean | false |
selectedIndex The zero-based active step index. Supports two-way binding. | ModelSignal<number> | 0 |
| Signal | Type |
|---|---|
steps The current collection of projected ngs-headless-step instances. | Signal<readonly HeadlessStep[]> |
stepsCount The number of projected steps. | Signal<number> |
selected The currently selected step instance. | Signal<HeadlessStep | undefined> |
canMoveNext Whether next() can move to the following step. | Signal<boolean> |
isFirstStep Whether the selected step is the first step. | Signal<boolean> |
isLastStep Whether the selected step is the last step. | Signal<boolean> |
progressPercent The current progress percentage based on the selected step. | Signal<number> |
| Method |
|---|
next() Moves to the next step when canMoveNext() is true. |
previous() Moves to the previous step unless the first step is selected. |
reset() Resets all steps and selects the first step. |
| Prop | Type | Default |
|---|---|---|
stepControl An optional Angular form control or group used to determine step completion. | AbstractControl | undefined | undefined |
optional Whether the step can be skipped in a linear flow. | boolean | false |
| Signal | Type |
|---|---|
completed Whether the step has no control or its control is valid. | Signal<boolean> |
interacted Whether the user has visited this step. | WritableSignal<boolean> |
isActive Whether this step is currently selected. | WritableSignal<boolean> |
| Method |
|---|
isValid() Returns the current validity of the step control. |
reset() Clears the step interacted state. |
Using this component in production?
NgStarter includes source code, admin dashboard templates, and commercial support.