Skip to main content
cngx-src documentation

CngxTextStepper

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/ui/stepper/text-stepper.component.ts

Import#

import { CngxTextStepper } from '@cngx/ui/stepper'

Description#

Text stepper variant. Smallest possible stepper: a single <span aria-live="polite"> driven by the presenter. Renders Step N of M by default (sourced from CngxStepperI18n.textStepperFormat); optional [showCurrentLabel] appends the active step's label next to the count. Material consumers inherit surrounding text styling via CSS inheritance, no theme bridge required.

https://cngxjs.github.io/cngx/examples/#/ui/stepper/text-stepper/inline-progress

Metadata#

Host#

Dependencies#

CNGX_STEPPER_HOSTinject()presenter

Index#

Inputs#

showCurrentLabel#boolean
input()

Append the active step's label to the count text. Off by default.

default false

Instance Properties#

errorGlyph#unknown
ProtectedReadonly

Default error glyph for the error sub-line.

CNGX_STEPPER_GLYPHS.errorBadge
i18n#unknown
ProtectedReadonly
injectStepperI18n()
stateView#unknown
ProtectedReadonly

Shared per-step/aggregate state derivations - the single error source.

createStepperStateView({
  presenter: this.presenter,
  stepsOnly: this.stepNodes,
})
stepNodes#Signal
ProtectedReadonly
this.presenter.stepsOnly

HostBindings#

BindingExpression
[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.