# Counter

> Animated number display. Use **odometer** mode for rolling-digit motion (mechanical counter look) or **tween** mode for an eased count-up from the previous value.

Source: https://ngwr.dev/reference/components/counter  
Kind: Display

## Installation

```angular-ts
import { WrCounter, WrCountUp } from 'ngwr/counter';

@Component({ imports: [WrCounter, WrCountUp] })
export class MyComponent {}
```

## Odometer

Digits roll vertically. Reacts to any value change.

```angular-html
<wr-counter [value]="123456" mode="odometer" />
```

## Tween

Eased single interpolation. Good for monetary values.

```angular-html
<wr-counter [value]="9.99" mode="tween" [decimals]="2" prefix="$" />
```

## Padded integer

Force a minimum number of integer digits.

```angular-html
<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.

```angular-html
<wr-count-up [to]="1000" easing="spring" trigger="visible" />
```

## Count down

Swap direction without rewriting `from` / `to`.

```angular-html
<wr-count-up [from]="60" [to]="0" direction="down" />
```

## Counter API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `value`required | 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` |
| `to`required | 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` | — |