https://github.com/phalla-doll/ng-number-flow
An Angular (17+ standalone) animated number component.
https://github.com/phalla-doll/ng-number-flow
Last synced: 6 days ago
JSON representation
An Angular (17+ standalone) animated number component.
- Host: GitHub
- URL: https://github.com/phalla-doll/ng-number-flow
- Owner: phalla-doll
- License: mit
- Created: 2026-07-07T02:57:34.000Z (23 days ago)
- Default Branch: main
- Last Pushed: 2026-07-14T07:37:30.000Z (16 days ago)
- Last Synced: 2026-07-14T09:18:07.126Z (16 days ago)
- Language: TypeScript
- Homepage: https://phalla-doll.github.io/ng-number-flow/
- Size: 1.11 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-number-flow - Angular wrapper around [number-flow](https://github.com/barvian/number-flow) — an accessible, animated number component. (Framework Interoperability / Wrappers)
- fucking-awesome-angular - ng-number-flow - Angular wrapper around [number-flow](https://github.com/barvian/number-flow) — an accessible, animated number component. (Framework Interoperability / Wrappers)
README
# ng-number-flow
[](https://www.npmjs.com/package/ng-number-flow)
[](./LICENSE)
An Angular (19+ standalone) wrapper around [number-flow](https://github.com/barvian/number-flow) —
an accessible, animated number component. Smooth rolling-digit transitions, locale-aware
formatting, and synchronized groups, built on the same framework-agnostic engine as the official
React, Vue, and Svelte packages.
**[▶ Live demo](https://phalla-doll.github.io/ng-number-flow/)** · **[📦 npm](https://www.npmjs.com/package/ng-number-flow)**
| Feature | Details |
| --- | --- |
| **Rolling-digit transitions** | Powered by the Web Animations API |
| **Accessible** | `role="img"` + `aria-label` |
| **Locale-aware formatting** | `Intl.NumberFormat`, cached |
| **Synchronized groups** | Group directive for coordinated animations |
| **Modern Angular** | Standalone, `OnPush`, signal-based, zoneless-compatible; Angular 19 → latest |
## Installation
```bash
npm i ng-number-flow number-flow
```
## Usage
```ts
import { Component, signal } from '@angular/core';
import { NumberFlowComponent } from 'ng-number-flow';
@Component({
selector: 'app-demo',
standalone: true,
imports: [NumberFlowComponent],
template: ``,
})
export class DemoComponent {
readonly count = signal(3500);
}
```
Formatting (any `Intl.NumberFormat` options, plus `locales`, `prefix`, `suffix`):
```html
```
Grouping — synchronize animations across multiple numbers:
```ts
import { NumberFlowComponent, NumberFlowGroupDirective } from 'ng-number-flow';
@Component({
selector: 'app-group',
standalone: true,
imports: [NumberFlowComponent, NumberFlowGroupDirective],
template: `
/
`,
})
export class GroupComponent {}
```
**Full API reference** (all inputs, outputs, timing options, exported types) lives in the package
README: [`packages/ng-number-flow/README.md`](./packages/ng-number-flow/README.md).
## Repository layout
```
ng-number-flow/
├── apps/
│ └── demo/ # standalone Angular demo app (zoneless)
├── docs/ # feasibility + implementation notes
└── packages/
└── ng-number-flow/ # the publishable Angular library (ng-packagr)
```
This is a pnpm workspace.
## Development
```bash
pnpm install
# Build the library (ng-packagr → packages/ng-number-flow/dist)
pnpm --filter ng-number-flow build
# Run the demo app (imports the library from source, live reload)
pnpm --filter demo start
```
The demo imports the library from source via a tsconfig `paths` mapping, so library edits
hot-reload without a rebuild.
See [`docs/feasibility-and-implementation-plan.md`](./docs/feasibility-and-implementation-plan.md)
for the architecture investigation and as-built implementation notes.
## SSR
Client-side only in this release; the component initializes in the browser. Declarative-Shadow-DOM
hydration is a planned follow-up.
## License
MIT — same as `number-flow`.