CngxStepperCount
projects/common/stepper/stepper-count.ts
Import#
import { CngxStepperCount } from '@cngx/common/stepper'
Description#
Reusable progress-hint atom for any stepper organism. Renders the
resolved CngxStepperI18n.textStepperFormat(current, total) string
inside a <span> and pipes the value through an aria-live region
so screen readers announce step transitions.
The text shape is fully owned by the i18n format function - drop the
atom inside any <cngx-stepper> / <cngx-mat-stepper> /
<cngx-progress-bar-stepper> tree and override the format upstream
to change every instance at once:
provideStepperI18n(withStepperI18nLabels({
textStepperFormat: (c, t) => `${c}/${t} complete`,
}));Canonical shapes the atom supports without any markup changes:
Step N of M(default)N/M completeN/MMath.round(c/t * 100)%- any consumer-defined string the closure returns.
[live]="false" opts the atom out of the aria-live region when
the caption sits next to another live region (e.g. a stepper that
already mounts its own live announcer) to prevent double announces.
Metadata#
Relationships
Index#
Inputs#
Explicit stepper-host reference. Set this when the atom sits
outside a <cngx-stepper> (e.g. in a sibling layout header)
by exporting the stepper as a template ref:
<cngx-stepper #s="cngxStepper"> then [host]="s.presenter".
When unset, the atom injects the ambient CNGX_STEPPER_HOST from
its DI tree. Accepts CngxStepperCountHost so a narrow stub
(active index + steps signal) also fits.
nullInstance Properties#
unknownPer-instance format override. Receives (current, total) where
current is the 1-based active step position and total is
host.stepsOnly().length. When omitted, the resolved
CngxStepperI18n.textStepperFormat is used so two siblings can
each show a different shape inside the same stepper tree.
input<((current: number, total: number) => string) | undefined>(undefined)