CngxMetric
projects/common/data/display/metric/metric.component.ts
Import#
import { CngxMetric } from '@cngx/common/data'
Description#
Displays a formatted numeric value with optional unit.
Uses Intl.NumberFormat with the injected LOCALE_ID for locale-aware
formatting. Null values render as an em-dash.
Composable - works inside any card variant, header, body, or standalone.
Basic
<cngx-metric [value]="1234" unit="bpm" />With format options
<cngx-metric [value]="99.6" unit="%" [format]="{ maximumFractionDigits: 1 }" />Inside a card
<cngx-card>
<header cngxCardHeader>Puls</header>
<cngx-metric cngxCardBody [value]="75" unit="bpm" />
</cngx-card>Metadata#
Host#
Index#
HostBindings
Inputs#
number | string | nullNumeric or string value. null renders as a placeholder hyphen.
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-label] | accessibleValue() |
Default visuals for CngxMetric. The host carries .cngx-metric -
an inline-flex container that pairs a large bold figure with a
small muted unit on a shared baseline.
Slots
.cngx-metric__value- the numeric figure (large, bold).cngx-metric__unit- the trailing unit or label (small, muted)
Inheritance
--cngx-metric-value-color->--cngx-color-text--cngx-metric-unit-color- leaf token, swaps in dark mode
Dark mode
Three hooks lift value and unit text to the foundation's dark-mode lightness; chroma and hue identity stay constant:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Index#
Layout
Typography
<color>oklch(0.36 0.02 290)Text color of the unit slot - muted by default.