CngxSegmentedProgress
projects/common/display/segmented-progress/segmented-progress.component.ts
Import#
import { CngxSegmentedProgress } from '@cngx/common/display'
Description#
Generic segmented position indicator - a discrete progress bar split
into N segments. Reusable outside the stepper (lightboxes, carousels,
onboarding), so it carries zero stepper dependency and no async
semantics - distinct from the continuous <cngx-progress> loading bar.
Drive it positionally with [value] / [total] (the segment states
derive automatically), or hand it an explicit [segments] array when
you need per-segment control (e.g. an error segment). ARIA
(role="progressbar" + the aria-value* set + aria-valuetext) lives
in the computed() graph (Pillar 2).
<cngx-segmented-progress [value]="3" [total]="8" />
<cngx-segmented-progress [segments]="['done', 'error', 'active', 'todo']" />Metadata#
Host#
Index#
Properties
Derived State
Inputs#
Explicit per-segment states. When set, wins over [value]/[total]
derivation - use it for an error segment or any non-linear layout.
Instance Properties#
unknownOverride the aria-valuetext string. Receives (now, max) - the
completed-segment count and the total segment count. Mirrors
CngxStepperCount.format; the default is (now, max) => \${now} of
${max}`. Supply a localised closure for non-English position text (e.g. (n, m) => `Schritt ${n} von ${m}``).
input<((now: number, max: number) => string) | undefined>(undefined)HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-valuemin] | 0 |
[attr.aria-valuemax] | max() |
[attr.aria-valuenow] | now() |
[attr.aria-valuetext] | valueText() |
Track A CSS for <cngx-segmented-progress>. Structural flex row of
segments; every gap / size / colour is a --cngx-segmented-progress-*
custom property, colours chaining to --mat-sys-* so the Material
theme picks them up. Per-segment colour keys off [data-state].