{"id":17405865,"url":"https://github.com/inorganik/ngx-countUp","last_synced_at":"2025-02-28T10:32:58.187Z","repository":{"id":24334016,"uuid":"101228140","full_name":"inorganik/ngx-countUp","owner":"inorganik","description":"Animates a numerical value by counting to it - for Angular","archived":false,"fork":false,"pushed_at":"2024-09-23T20:50:38.000Z","size":1613,"stargazers_count":136,"open_issues_count":0,"forks_count":25,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-08T09:47:52.564Z","etag":null,"topics":[],"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/inorganik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-08-23T21:54:06.000Z","updated_at":"2024-09-30T03:10:49.000Z","dependencies_parsed_at":"2024-01-12T18:41:38.727Z","dependency_job_id":"33768dd6-e591-40c9-a78a-163411a15658","html_url":"https://github.com/inorganik/ngx-countUp","commit_stats":{"total_commits":55,"total_committers":10,"mean_commits":5.5,"dds":0.5818181818181818,"last_synced_commit":"69c986e95b8c9c358cffa01ec8f53842e5926a1e"},"previous_names":["inorganik/countup.js-angular2"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inorganik%2Fngx-countUp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inorganik%2Fngx-countUp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inorganik%2Fngx-countUp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inorganik%2Fngx-countUp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inorganik","download_url":"https://codeload.github.com/inorganik/ngx-countUp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219872227,"owners_count":16560854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-16T21:01:15.193Z","updated_at":"2024-10-16T21:02:06.919Z","avatar_url":"https://github.com/inorganik.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"# ngx-countup - CountUp.js in Angular\n\nThis is an Angular directive wrapper around the core functionality of CountUp which is maintained in the [CountUp.js repo](https://github.com/inorganik/countUp.js). MIT License.\n\n#### [CountUp.js demo](http://inorganik.github.io/countUp.js)\nOr see this angular version work by cloning this project and running `ng serve`.\n\nThis module supports Angular 7 and newer. The CountUp module for Angular 1.x is [here](https://github.com/inorganik/countUp.js-angular1).\n\nContents:\n- [Usage](#usage)\n- [Angular Universal](#angular-universal)\n- [Testing](#testing)\n- [Contributing](#contributing)\n\n## Usage\n\nInstall the package in your project. For **Angular 13** and newer:\n\n`npm i ngx-countup`\n\nIf you are using an **older version of Angular**, use the following:\n\n`npm i ngx-countup@7`\n\n---\n\nIn `app.module.ts`, import the module in your Angular module, or component if you are using standalone:\n```ts\nimport { CountUpModule } from 'ngx-countup';\n\n@NgModule({\n  imports: [\n    ...\n    CountUpModule\n  ],\n  ...\n})\n```\n\nUse it in your markup. Since it's a directive, it can be added to any element:\n```html\n\u003ch1 [countUp]=\"345\" (complete)=\"doSomethingOnComplete()\"\u003e0\u003c/h1\u003e\n```\n\nInputs:\n- `countUp`: number to count to\n- `options`: [CountUpOptions](https://github.com/inorganik/countUp.js#options) - fine-grain control over CountUp\n- `reanimateOnClick`: pass false to disable (defaults to true)\n\nOutputs:\n- `complete`: emits when the animation completes\n\n### Scroll Spy!\n\nScroll spy means it will automatically start animating when the CountUp element scrolls into view. Enable it in the options:\n\n```html\n\u003ch1 [countUp]=\"myEndVal\" [options]=\"{ enableScrollSpy: true }\"\u003e0\u003c/h1\u003e\n```\n\n### Defer animation\n\nBind [countUp] to some property. Leave `myEndVal` undefined and the animation won't start until `myEndVal` has a value.\n```html\n\u003ch1 [countUp]=\"myEndVal\" [options]=\"myOpts\"\u003e0\u003c/h1\u003e\n```\n### Re-animate\n\nTo re-animate CountUp programmatically, add a template ref variable to the markup (with #):\n\n```html\n\u003ch1 #countUp [countUp]=\"myEndVal\" [options]=\"myOpts\"\u003e0\u003c/h1\u003e\n```\n\nThen, select it with `@ViewChild` in your component's Typescript file (using the template ref # you created). \n\n```ts\n  @ViewChild('countUp') countUp: CountUpDirective;\n```\n\nFinally, call the animate function where needed.\n\n```ts\n  this.countUp.animate();\n```\n\nRemember to do this inside `ngAfterViewInit()` to do something on component load.\n\n## Angular Universal\n\nYes, this component works with SSR and prerendering!\n\n\n## Testing\n\nThe test app in this repo has a passing test for a component that uses the CountUp directive, which you can use as an example.  If your component uses the CountUp directive, include the CountUpModule in your TestBed:\n\n```\nbeforeEach(async(() =\u003e {\n  TestBed.configureTestingModule({\n    imports: [\n      CountUpModule,\n      ...\n    ],\n    ...\n  })\n});\n```\n\n## Contributing\n\nBefore you make a pull request, please follow these instructions:\n\n1. Make your edits to `./projects/count-up/src/lib/count-up.directive.ts`.\n1. Run `npm start` and test your changes in the demo app.\n\nPublishing (you don't need to do this, it\u0026rsquo;s for my own reference):\n\n1. Increment the version number if necessary (and `install-tarball` script).\n1. Commit changes.\n1. Run `npm run package:countup` which builds and packs a tarball.\n1. Install the tarball in the test app: `npm run install-tarball`.\n1. Make app.module import from newly installed package.\n1. Run the test app with AOT compiler and make sure the demo works: `npm run serve:prod`.\n1. Run `npm publish dist/count-up`\n1. Discard changes.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finorganik%2Fngx-countUp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finorganik%2Fngx-countUp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finorganik%2Fngx-countUp/lists"}