CngxStatCard
projects/ui/stat-card/stat-card.component.ts
Import#
import { CngxStatCard } from '@cngx/ui/stat-card'
Description#
Card-framed KPI tile: one <cngx-stat-card> renders a complete dashboard
metric - card surface, coordinated stat slots, an inline visualisation, a
footer, and the async view switch - from a single [state].
The stat slots are the existing cngxStatLabel / cngxStatValue /
cngxStatDelta / cngxStatCaption atoms from @cngx/common/data, not
copies. They resolve CNGX_STAT against their declaration site, so the card
hosts the same CngxStatCoordinator brain CngxStat hosts and
re-points the token at it - the shape CngxIncrementalList uses for
CNGX_PAGINATOR_HOST. A screen reader therefore reads the tile as one
phrase, not four fragments (Pillar 2).
The view switch is a pure computed() off [state] via resolveAsyncView
(Pillar 1) - there is no second state machine and no boolean fallback inputs.
Like cngx-chart, the card does not provide CNGX_STATEFUL: the
consumer already holds the state object it bound, so transition bridges take
it directly, e.g. <cngx-toast-on [state]="revenue" />.
<cngx-stat-card [state]="revenue">
<span cngxStatLabel>Revenue</span>
<cngx-metric cngxStatValue [value]="1.2" unit="M EUR" />
<cngx-delta cngxStatDelta [value]="5.3" />
<span cngxStatCaption>vs. last quarter</span>
<cngx-sparkline cngxStatCardViz [data]="trend()" />
</cngx-stat-card>Metadata#
Host#
Providers#
CNGX_STAT- useExisting
CngxStatCoordinator
Relationships
Index#
Inputs#
Accessible label announced while the card is loading.
this.config.ariaLabels?.busy ?? 'Loading'Headline of the empty state shown when a load settled with no data.
this.config.ariaLabels?.emptyFallback ?? 'No data'string | undefinedSupporting detail under errorText. Omitted when unset.
this.config.ariaLabels?.errorDescription, Headline of the error state shown instead of the stat when the first load failed.
this.config.ariaLabels?.errorFallback ?? 'Could not load'"off" | "polite" | "assertive"Politeness of the tile's live region. off (default) for a static KPI;
polite for a tile that refreshes on a timer, so the new figure is
announced instead of changing silently. Mirrors CngxStat.live.
'off'CngxLoadingTreatmentWhat the card shows while it loads. 'auto' (default) picks from the
latency the tile itself observed: a tile whose last load was quick shows a
spinner blip, one whose last load dragged shows a skeleton. 'spinner' and
'skeleton' pin the choice.
this.config.loadingTreatment ?? 'auto'Note appended below the stat when a refresh failed but stale data is still shown.
this.config.ariaLabels?.staleFallback ?? 'Showing last known value', The tile's async envelope. Every view decision derives from it; there are
no discrete loading / error boolean fallbacks. Optional per the
bridge-input rule, so [state] may be bound conditionally.
undefined, { transform: (v) => (typeof v === 'string' ? undefined : v) }, HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-busy] | busy() || null |
[class.cngx-stat-card--busy] | busy() |