Animates a number from a start value to a target value using a smooth ease-out curve. Triggered by IntersectionObserver — the animation fires once when the element enters the viewport. Add prefix, suffix, and separator for formatted output.
Playground
<ply-animated-counter [value]="1250" [from]="0" [decimals]="0" suffix="+" separator=",">Animated Counter</ply-animated-counter>
Total Users
Uptime
Daily Revenue
<ply-animated-counter [value]="48295" separator=","></ply-animated-counter>
<ply-animated-counter [value]="98.4" [decimals]="1" suffix="%"></ply-animated-counter>
<ply-animated-counter [value]="3200" prefix="$" separator=","></ply-animated-counter>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add animated-counter
// Paths are relative to aliases.components (default: src/app/components)
import { AnimatedCounterComponent } from './animated-counter/animated-counter.component';
@Component({
selector: 'app-animated-counter-example',
imports: [
AnimatedCounterComponent
],
template: `...`
})
export class AnimatedCounterExampleComponent {}Install
npx ply-ui-cli add animated-counter
Control animation speed with [duration] in milliseconds. Defaults to 1500.
500ms
1500ms (default)
3000ms
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add animated-counter
// Paths are relative to aliases.components (default: src/app/components)
import { AnimatedCounterComponent } from './animated-counter/animated-counter.component';
@Component({
selector: 'app-animated-counter-example',
imports: [
AnimatedCounterComponent
],
template: `...`
})
export class AnimatedCounterExampleComponent {}Install
npx ply-ui-cli add animated-counter
Combine with ply-stat-card or any layout for live dashboard-style KPI bars.
Downloads
Stars
Uptime
Components
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add animated-counter
// Paths are relative to aliases.components (default: src/app/components)
import { AnimatedCounterComponent } from './animated-counter/animated-counter.component';
@Component({
selector: 'app-animated-counter-example',
imports: [
AnimatedCounterComponent
],
template: `...`
})
export class AnimatedCounterExampleComponent {}Install
npx ply-ui-cli add animated-counter
Run the following command to add this component to your project:
npx ply-ui-cli add animated-counter
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add animated-counter
// Paths are relative to aliases.components (default: src/app/components)
import { AnimatedCounterComponent } from './animated-counter/animated-counter.component';
@Component({
selector: 'app-your-component',
imports: [
AnimatedCounterComponent
],
template: `...`
})
export class YourComponent {} API for animated-counter — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-animated-counter | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-animated-counter | value | number | 0 | — |
ply-animated-counter | from | number | 0 | — |
ply-animated-counter | duration | number | 1500 | — |
ply-animated-counter | decimals | number | 0 | — |
ply-animated-counter | prefix | string | '' | — |
ply-animated-counter | suffix | string | '' | — |
ply-animated-counter | separator | unknown | ',' | — |
Content