Stat Card for Angular

import { AuiStatCard } from '@absoluteui/angular/stat-card';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Stat Card page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { statCard: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiStatCard } from '@absoluteui/angular/stat-card';

@Component({
  selector: 'app-revenue',
  imports: [AuiStatCard],
  template: `<aui-stat-card label="Revenue" [value]="48200" [previous]="40100" [valueFormat]="currency" comparisonLabel="vs last month"></aui-stat-card>`,
})
export class RevenueComponent {
  readonly currency: Intl.NumberFormatOptions = { style: 'currency', currency: 'USD', maximumFractionDigits: 0 };
}

<aui-stat-card>

Class AuiStatCard; template reference #ref="auiStatCard".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Metric name; names the card (group) and, by default, the trend sparkline. Non-empty.
value	string | number | null		Required. A number (formatted with valueFormat or formatValue), preformatted text, or null (‘No value’).
previous	number | null		Previous value; the change is computed from it when value is a number (percent: (value - previous) / |previous|, not shown for 0; absolute: value - previous). Finite.
delta	number | null		Explicit change (a ratio for ‘percent’, units for ‘absolute’); wins over previous. Finite.
comparisonLabel	string		Caption after the change, for example ‘vs last month’ (shown only with a change).
description	string		Supporting text at the bottom.
trend	readonly (number | null)[]		Trend values rendered as a Sparkline (null is a gap); an empty array shows none.
trendLabel	string		Sparkline accessible label. Default: the card label.
trendColor	SparklineColor	'1'	Chart palette slot of the sparkline (1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; SparklineColor from @absoluteui/components/sparkline).
valueFormat	NumberFormatOptions		Number format of the value (and of an absolute change).
formatValue	(value: number) => string		Custom value formatter; wins over valueFormat (also used for an absolute change).
icon	IconRef		Decorative icon before the label.
href	string		Make the whole card a link (http(s) or relative URLs only; others throw). The URL can change with update(), but adding or removing href throws.
busy	boolean	false	Show ‘Loading’ instead of the value (no change) and set aria-busy.
sentiment	StatCardSentiment	'higher-is-better'	Whether an increase is favorable, unfavorable, or neither; decides the color and the spoken ‘favorable’/‘unfavorable’.
deltaFormat	StatCardDeltaFormat	'percent'	Relative change (percent, max 1 fraction digit) or the difference in value units.
locale	string	'en-US'	Number formatting and message locale.
direction	Direction	'ltr'	Passed to the trend sparkline.