{"id":13808170,"url":"https://github.com/hm21/ngx-count-animation","last_synced_at":"2026-01-26T18:02:29.973Z","repository":{"id":213229163,"uuid":"733380094","full_name":"hm21/ngx-count-animation","owner":"hm21","description":"A package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.","archived":false,"fork":false,"pushed_at":"2025-03-17T15:38:56.000Z","size":788,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-20T21:11:04.742Z","etag":null,"topics":["angular","angular2","animation","count"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hm21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-19T07:43:26.000Z","updated_at":"2025-07-24T14:37:19.000Z","dependencies_parsed_at":"2023-12-29T13:30:32.176Z","dependency_job_id":"d6237d82-52ce-4aa0-9737-2915ae6c573e","html_url":"https://github.com/hm21/ngx-count-animation","commit_stats":null,"previous_names":["hm21/ngx-count-animation"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hm21/ngx-count-animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-count-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-count-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-count-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-count-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hm21","download_url":"https://codeload.github.com/hm21/ngx-count-animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-count-animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28784093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T13:55:28.044Z","status":"ssl_error","status_checked_at":"2026-01-26T13:55:26.068Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","animation","count"],"created_at":"2024-08-04T01:01:36.579Z","updated_at":"2026-01-26T18:02:29.955Z","avatar_url":"https://github.com/hm21.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hm21"],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"\u003ch1\u003eAngular Count Animations\u003c/h1\u003e\n\n\u003cdiv\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-count-animation.svg)](https://badge.fury.io/js/ngx-count-animation)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/ngx-count-animation.svg)](https://badge.fury.io/js/ngx-count-animation)\n[![NPM total downloads](https://img.shields.io/npm/dt/ngx-count-animation.svg)](https://badge.fury.io/js/ngx-count-animation)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Issues](https://img.shields.io/github/issues/hm21/ngx-count-animation)](https://github.com/hm21/ngx-count-animation/issues)\n[![Web Demo](https://img.shields.io/badge/web-demo---?\u0026color=0f7dff)](https://ngx-hm21.web.app/count-animation)\n\n\u003c/div\u003e\n\n\u003cimg src=\"https://github.com/hm21/ngx-count-animation/blob/master/assets/showcase.gif?raw=true\" width=450 /\u003e\n\u003ca href=\"https://ngx-hm21.web.app/count-animation\"\u003e\n      Demo Website\n\u003c/a\u003e\n\n## Table of contents\n\n- [About](#about)\n- [Getting started](#getting-started)\n- [Documentation](#documentation)\n- [Example](#example)\n- [Contributing](#contributing)\n- [License](LICENSE)\n\n## About\n\nA package that elegantly animates number changes, creating a visually engaging transition from one value to another, perfect for counting or displaying real-time data updates.\n\n## Getting started\n\n### Installation\n\n```sh\nnpm install ngx-count-animation\n```\n\n### Import the directive\n\n```typescript\nimport { Component } from \"@angular/core\";\nimport { NgxCountAnimationDirective } from \"ngx-count-animation\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  templateUrl: \"./app.component.html\",\n  styleUrl: \"./app.component.scss\",\n  imports: [NgxCountAnimationDirective],\n})\nexport class AppComponent {}\n```\n\nAdd `provideNgxCountAnimations` to your `app.config.ts` file as shown below.\n\n```typescript\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideClientHydration(),\n\n    /// Add the code below\n    provideNgxCountAnimations(),\n  ],\n};\n```\n\n\u003cbr/\u003e\n\n\u003ch2\u003eDocumentation\u003c/h2\u003e\n\n### Inputs\n\n| Option                      | Type    | Default | Comment                                                                                                                       |\n| :-------------------------- | :------ | :------ | :---------------------------------------------------------------------------------------------------------------------------- |\n| ngxCountAnimation           | number  |         | Sets the target count for the count animation.                                                                                |\n| maximumFractionDigits       | number  | 0       | The maximum number of fraction digits to display.                                                                             |\n| minimumFractionDigits       | number  | 0       | The minimum number of fraction digits to display.                                                                             |\n| duration                    | number  | 2000    | Sets the duration of the count animation.                                                                                     |\n| durationFromValue           | number  |         | Sets the duration based on the given value.                                                                                   |\n| enableLayoutChangeDetection | boolean | true    | When `enableLayoutChangeDetection` is set to `true`, there is always an interval listener active that detects layout changes. |\n\n### Outputs\n\n| Option         | Type               | Comment                                       |\n| :------------- | :----------------- | :-------------------------------------------- |\n| startAnimation | output\u003cvoid\u003e | Emits an event at the start of the animation. |\n| endAnimation   | output\u003cvoid\u003e | Emits an event at the end of the animation.   |\n\n\u003ch2\u003eExample\u003c/h2\u003e\n\n#### Simple example\n\n```html\n\u003cdiv ngxCountAnimation=\"1000000\"\u003e\u003c/div\u003e\n```\n\n#### Complete example demonstrating all properties\n\n```html\n\u003cdiv ngxCountAnimation=\"123456789\" duration=\"2000\" maximumFractionDigits=\"0\" minimumFractionDigits=\"0\" enableLayoutChangeDetection=\"true\"\u003e\u003c/div\u003e\n```\n\n\n## Sponsors \n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/hm21\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/hm21/sponsors/main/sponsorkit/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Contributing\n\nI welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.\n\n### Bug Reports and Feature Requests\n\nIf you encounter a bug or have an idea for a new feature, please open an issue on my [GitHub Issues](https://github.com/hm21/ngx-count-animation/issues) page. I will review it and discuss the best approach to address it.\n\n### Code Contributions\n\nIf you'd like to contribute code to this project, please follow these steps:\n\n1. Fork the repository to your GitHub account.\n2. Clone your forked repository to your local machine.\n\n```bash\ngit clone https://github.com/hm21/ngx-count-animation.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-count-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhm21%2Fngx-count-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-count-animation/lists"}