Installation
import { WrCounter, WrCountUp } from 'ngwr/counter';
@Component({ imports: [WrCounter, WrCountUp] })
export class MyComponent {}Odometer
Digits roll vertically. Reacts to any value change.
<wr-counter [value]="123456" mode="odometer" />Tween
Eased single interpolation. Good for monetary values.
<wr-counter [value]="9.99" mode="tween" [decimals]="2" prefix="$" />Padded integer
Force a minimum number of integer digits.
<wr-counter [value]="42" [minIntegerDigits]="6" mode="odometer" />Count up — spring + viewport trigger
<wr-count-up> is the spring-physics sibling. Use it when you want viewport-triggered animation, started/completed outputs, or count-down.
<wr-count-up [to]="1000" easing="spring" trigger="visible" />Count down
Swap direction without rewriting from / to.
<wr-count-up [from]="60" [to]="0" 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. Units depend on easing: - ease-out — milliseconds (default 1200, min 100) - spring — seconds (tunes spring stiffness; default 2) | number | 1200 |
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 | — |