import { Component } from '@angular/core';
import { WrCountUp, WrCounter } from 'ngwr/counter';
@Component({ imports: [WrCountUp, WrCounter] })
export class MyComponent {}Counter
An animated number: rolling digits or an eased count.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Odometer
Digits roll on every change of value.
<wr-counter [value]="123456" mode="odometer" />Tween
mode="tween" eases from the old value to the new one.
<wr-counter [value]="9.99" mode="tween" [decimals]="2" prefix="$" />Padded integer
minIntegerDigits pads the number with leading zeros.
<wr-counter [value]="42" [minIntegerDigits]="6" mode="odometer" />Count up
<wr-count-up> counts from from to to on load or, with trigger="visible", when it scrolls into view.
<!-- With easing="spring", duration is in seconds. -->
<wr-count-up [to]="1000" easing="spring" [duration]="2" trigger="visible" />Count down
direction="down" counts from to to from.
<wr-count-up [from]="0" [to]="60" direction="down" />Counter API
| Name | Description | Type | Default |
|---|---|---|---|
valuerequired | The number to show. Coerced like every other numeric input here — it was the only one without it, and Intl.NumberFormat().format(NaN) renders the literal text NaN. | number | — |
mode | Animation mode. | WrCounterMode | 'odometer' |
duration | Duration (ms). | number | 900 |
decimals | Fixed number of decimals. | number | 0 |
prefix | Optional prefix (e.g. '$'). | string | '' |
suffix | Optional suffix (e.g. '%'). | string | '' |
grouping | Group thousands. | boolean | true |
minIntegerDigits | Pad integer part to at least this many digits. | number | 0 (no padding) |
Count-up API
| Name | Description | Type | Default |
|---|---|---|---|
from | Starting value. | number | 0 |
torequired | Target value. | number | — |
duration | Animation duration, in the units its easing reads, or null for that easing's own default: - ease-out — milliseconds (default 1200, min 100) - spring — seconds, tuning the stiffness (default 2, min 0.05) | number | null | null |
delay | Optional delay (ms) before the animation starts. | number | 0 |
easing | Animation curve. | WrCountUpEasing | 'ease-out' |
trigger | When to start the animation. - 'mount' (default) — start as soon as the component is rendered. - 'visible' — wait for the host to enter the viewport (IntersectionObserver). Useful for long pages or hero numbers below the fold. | WrCountUpTrigger | 'mount' |
direction | Counting direction. 'down' swaps from ↔ to. | WrCountUpDirection | 'up' |
decimals | Fixed number of decimals. | number | 0 |
prefix | Optional prefix (e.g. '$'). | string | '' |
suffix | Optional suffix (e.g. '%'). | string | '' |
grouping | Disable grouping separators (1,234 → 1234). | boolean | true (grouping on) |
(started) | Emits when the animation begins. | void | — |
(completed) | Emits when the animation settles. | void | — |
Dependencies
| Used by | Statistic |
|---|