CngxTrend
projects/common/data/display/trend/trend.component.ts
Import#
import { CngxTrend } from '@cngx/common/data'
Description#
Displays a trend indicator with directional arrow and formatted percentage.
Positive values show an up arrow, negative a down arrow, zero a right arrow. The consumer can override the SR label for full context (e.g. "vs. last month" instead of the generic default).
Basic
<cngx-trend [value]="5.3" />With custom label
<cngx-trend [value]="-2.1" label="-2.1% vs. last quarter" />Inside a card header
<cngx-card>
<header cngxCardHeader>
<span>Revenue</span>
<cngx-trend [value]="revenue().trend" />
</header>
</cngx-card>Metadata#
Host#
Index#
Inputs#
string | undefinedConsumer-provided SR label override. When set, replaces the generated default.
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-trend--up] | value() > 0 |
[class.cngx-trend--down] | value() < 0 |
[attr.aria-label] | resolvedLabel() |
Default visuals for CngxTrend. The host carries .cngx-trend -
an inline-flex pair of an arrow glyph and a short label. Two
directional modifiers pin the color to the matching semantic
intent; the bare host renders in muted neutral.
Direction modifiers
--up- positive movement, success-coded--down- negative movement, danger-coded
Inheritance
--cngx-trend-up-color->--cngx-color-success--cngx-trend-down-color->--cngx-color-danger--cngx-trend-color- leaf neutral token, swaps in dark mode
Dark mode
Three hooks lift all three color tokens to the foundation's dark variant - neutral text gains lightness, the directional colors shed chroma and gain L to track the foundation's dark success and danger tones:
prefers-color-scheme: dark[data-color-scheme="dark"]/.darkclass[data-color-scheme="light"]/.lightclass (explicit pin)
Index#
Layout
Typography
Surface
Variant / Up
Variant / Down
Layout
Typography
Surface
<color>oklch(0.36 0.02 290)Neutral text color applied when no direction modifier is set.
Variant / Up
<color>oklch(0.65 0.18 145)Color of the .cngx-trend--up modifier. Falls back to
--cngx-color-success.
See: [[--cngx-color-success]]
Variant / Down
<color>oklch(0.65 0.22 25)Color of the .cngx-trend--down modifier. Falls back to
--cngx-color-danger.
See: [[--cngx-color-danger]]