{"id":15046286,"url":"https://github.com/jmandreslopez/ng2-odometer","last_synced_at":"2025-10-26T17:31:09.528Z","repository":{"id":57146717,"uuid":"83009100","full_name":"jmandreslopez/ng2-odometer","owner":"jmandreslopez","description":"Odometer for Angular2","archived":false,"fork":false,"pushed_at":"2020-09-03T23:14:37.000Z","size":37,"stargazers_count":22,"open_issues_count":7,"forks_count":18,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T21:52:12.451Z","etag":null,"topics":["angular","angular-cli","angular2","javascript","odometer","typescript"],"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/jmandreslopez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-24T06:27:19.000Z","updated_at":"2025-01-30T15:05:59.000Z","dependencies_parsed_at":"2022-08-29T19:31:08.146Z","dependency_job_id":null,"html_url":"https://github.com/jmandreslopez/ng2-odometer","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmandreslopez%2Fng2-odometer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmandreslopez%2Fng2-odometer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmandreslopez%2Fng2-odometer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jmandreslopez%2Fng2-odometer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jmandreslopez","download_url":"https://codeload.github.com/jmandreslopez/ng2-odometer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238375165,"owners_count":19461561,"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":["angular","angular-cli","angular2","javascript","odometer","typescript"],"created_at":"2024-09-24T20:52:57.208Z","updated_at":"2025-10-26T17:31:04.168Z","avatar_url":"https://github.com/jmandreslopez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng2-odometer [![npm version](https://img.shields.io/npm/v/ng2-odometer.svg?style=flat)](https://www.npmjs.com/package/ng2-odometer) [![MIT license](http://img.shields.io/badge/license-MIT-brightgreen.svg)](http://opensource.org/licenses/MIT)\n\nOdometer for Angular2 that wraps HubSpot's Odometer [http://github.hubspot.com/odometer/docs/welcome/](http://github.hubspot.com/odometer/docs/welcome/)\n\n## Quick Start\n\n```\nnpm install ng2-odometer --save\n```\n\n## Table of contents\n\n- [Setup](#setup)\n- [Usage](#usage)\n- [Configuration](#configuration)\n- [Demo](#demo)\n\n## Setup\n\nFirst you need to install the npm module:\n```sh\nnpm install ng2-odometer --save\n```\n\nThen add the `Ng2OdometerModule` to the imports array of your application module.\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { Ng2OdometerModule } from 'ng2-odometer'; // \u003c-- import the module\nimport { AppComponent} from './app.component';\n\n@NgModule({\n    imports: [\n      BrowserModule, \n      Ng2OdometerModule.forRoot() // \u003c-- include it in your app module\n    ], \n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n    //\n}\n```\n\n## Usage \n\nUse the `\u003cng2-odometer\u003e\u003c/ng2-odometer\u003e` component to create an odometer. The `number` is required attribute. \nThe `number` represents the limit at which the odometer will travel. The `config` an object with the configuration properties, this is NOT required. \n\n```js\n@Component({\n   selector: 'main-element',\n   template: `\n        ...\n        \u003cng2-odometer [number]=\"number\" [config]=\"{ }\"\u003e\u003c/ng2-odometer\u003e\n        \u003c!-- Further content here --\u003e\n        ...\n   `\n})\nexport class MainElementComponent {\n  public number: number = 1000;\n}\n```\n\nWhen on manual mode (`[config]=\"{ auto: false }\"`), you can update the `number` attribute and that will trigger an odometer update right away. The `observable` is an Observable which will be used as a trigger for the odometer when on manual mode. \n\n```js\n@Component({\n   selector: 'main-element',\n   template: `\n        ...\n        \u003cng2-odometer [number]=\"number\" [config]=\"{ auto: false }\" [observable]=\"observable\"\u003e\u003c/ng2-odometer\u003e\n        \u003c!-- Further content here --\u003e\n        ...\n   `\n})\nexport class MainElementComponent {\n  public number: number = 1000;\n  public observable: Observable\u003cboolean\u003e;\n  private observer: Observer\u003cboolean\u003e;\n  \n  constructor() {\n    this.observable = new Observable\u003cboolean\u003e((observer: any) =\u003e this.observer = observer).share();\n\n    // Trigger odometer after 2s\n    setTimeout(() =\u003e this.observer.next(true), 2000);\n  }\n}\n```\n\n## Configuration\n\nThe component accepts either a `[config]=\"{ ... }\"` attribute with an object with all the configurable attribues or independent attributes for each configuration.\n\n| Option        | Type      | Default     | Description   |\n| --------------| --------- | ----------- |-------------- |\n| `animation`   | string    | 'slide'     | Animation effect type. \u003cbr\u003e Options: 'slide', 'count'\n| `format`      | string    | '(,ddd)'    | Format to apply on the numbers. \u003cbr\u003e Format - Example: \u003cbr\u003e (,ddd) - 12,345,678 \u003cbr\u003e (,ddd).dd - 12,345,678.09 \u003cbr\u003e (.ddd),dd - 12.345.678,09 \u003cbr\u003e ( ddd),dd - 12 345 678,09 \u003cbr\u003e d         -  12345678\n| `theme`       | string    | 'default'   | The desired theme. \u003cbr\u003e Options: 'default', 'minima', 'digital', 'car', 'plaza', 'slot-machine', 'train-station'\n| `value`       | number    | 0           | Initial value of the odometer\n| `auto`        | boolean   | true        | Setup auto or manual mode for the odometer\n\n```js\n@Component({\n   selector: 'main-element',\n   template: `\n        ...\n        \u003cng2-odometer \n            [number]=\"1000\" \n            [observable]=\"observable\" \n            [config]=\"config\"\u003e\u003c/ng2-odometer\u003e\n        \u003c!-- Further content here --\u003e\n\n        \u003cng2-odometer \n            [number]=\"1000\" \n            [observable]=\"observable\"\n            [config]=\"{ animation: 'count', format: 'd', theme: 'car', value: 50, auto: false }\"\u003e\n        \u003c/ng2-odometer\u003e\n        \u003c!-- Further content here --\u003e\n\n        \u003cng2-odometer \n            [number]=\"1000\"  \n            [observable]=\"observable\"\n            [animation]=\"'count'\"\n            [format]=\"'d'\"\n            [theme]=\"'car'\"\n            [value]=\"0\",\n            [auto]=\"false\"\u003e\n        \u003c/ng2-odometer\u003e\n        \u003c!-- Further content here --\u003e\n        ...\n   `\n})\nexport class MainElementComponent {\n    public config = {\n        animation: 'count', \n        format: 'd', \n        theme: 'car', \n        value: 50,\n        auto: true,\n    }\n\n    ...\n}\n```\n\nIf you add both, the `[config]` and any independent configuration, the independent config will overwrite the `[config]` object.\n\n## Demo\n\nThe [demo](demo) subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of ng2-odometer.\nTo execute the code follow this steps:\n\n```\n// Go the the demo folder\ncd demo\n\n// Install dependencies\nnpm install\n\n// Run the server\nng serve\n```\n\nThen go to [http://localhost:4200](http://localhost:4200/) to check the demo running.\n\n## TODO:\n\n* Update to Angular4\n* Add tests to the library and demo\n* Add new themes\n* Create a Directive also\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmandreslopez%2Fng2-odometer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjmandreslopez%2Fng2-odometer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjmandreslopez%2Fng2-odometer/lists"}