CngxTextStepper
projects/ui/stepper/text-stepper.component.ts
Import#
import { CngxTextStepper } from '@cngx/ui/stepper'
Description#
Text stepper variant. Smallest possible stepper: an always-mounted
<span aria-live="polite"> driven by the presenter (empty while no
step is projected, so a live load never announces Step 0 of 0).
Renders Step N of M by default (sourced from
CngxStepperI18n.textStepperFormat); optional [showCurrentLabel]
appends the active step's label next to the count. A step-less flow
renders the CNGX_STEPPER_CONFIG empty-template cascade instead.
Material consumers inherit surrounding text styling via CSS
inheritance, no theme bridge required.
Metadata#
Content Slots#
Host#
Dependencies#
CNGX_STEPPER_HOSTinject()presenterRelationships
Index#
Inputs
Derived State
HostBindings
Inputs#
Instance Properties#
unknownEmpty-state cascade mirroring <cngx-stepper>: per-instance
*cngxStepperEmpty > CNGX_STEPPER_CONFIG.templates.empty > null.
Rendered next to the (empty) live span so a step-less flow shows
the placeholder instead of a bare Step 0 of 0 count.
computed<TemplateRef<void> | null>(
() => this.emptySlot()?.templateRef ?? this.config.templates?.empty ?? null,
)unknownShared per-step/aggregate state derivations - the single error source.
createStepperStateView({
presenter: this.presenter,
stepsOnly: this.stepNodes,
})HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-invalid] | stateView.hasAnyError() ? "true" : null |
Structural skin for <cngx-text-stepper>. Typography inherits from
the consumer's surrounding text - no theme bridge required. The error
sub-line wraps to its own row beneath the count via flex-basis: 100%,
so the count stays inline with adjacent text while the error reads below.