Statistic
@xui/statisticA single numeric statistic with an optional title, prefix/suffix and decimal precision — plus a live <xui-countdown> variant.
Install
pnpm add @xui/statistic Add the barrel to a standalone component's imports:
import { XuiStatisticImports } from '@xui/statistic';
@Component({
imports: [XuiStatisticImports],
// …
})Examples
Basic
Loading preview…
<div class="flex gap-12">
<xui-statistic title="Active users" [value]="1128" />
<xui-statistic title="Account balance" [value]="112893.5" [precision]="2" prefix="$" />
<xui-statistic title="Uptime" [value]="99.9" [precision]="1" suffix="%" />
</div>Countdown
Loading preview…
<div class="flex gap-12">
<xui-countdown title="Launch in" [target]="deadline" format="D 'd' HH:mm:ss" />
<xui-countdown title="Sale ends" [target]="deadline" />
</div>API
A live countdown to a target time. Ticks every second and emits finished once it reaches zero. format tokens: D days, H/HH hours, m/mm minutes, s/ss seconds, SSS milliseconds.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''titlestringWhat is being counted down to.''targetnumber | DateTarget time as an epoch millisecond value or a Date.formatstringPattern for the remaining time, e.g. HH:mm:ss or D day H:mm:ss.'HH:mm:ss'Outputs
finishedvoidFires once when the countdown reaches zero.A single numeric statistic — a muted title over a large value with optional prefix/suffix (string inputs or projected [xuiStatisticPrefix] / [xuiStatisticSuffix] content). Numbers are grouped and rounded to precision.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''titlestringWhat the number measures. Project [xuiStatisticTitle] content instead when it needs markup.''valuenumber | stringThe figure itself. A number is formatted to precision decimals with thousands separators; a string is shown as given.''precisionnumberDecimal places for numeric values.0prefixstringText before the value, e.g. a currency symbol.''suffixstringText after the value, e.g. a unit.''