{"id":22903552,"url":"https://github.com/sawyerbutton/angular-odometer-demo","last_synced_at":"2026-04-21T16:04:02.322Z","repository":{"id":120748100,"uuid":"155559251","full_name":"sawyerbutton/angular-odometer-demo","owner":"sawyerbutton","description":"Demo for Angular Odometer with Mock of Sequence api call by using Observable","archived":false,"fork":false,"pushed_at":"2018-11-05T10:34:49.000Z","size":263,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T07:26:54.509Z","etag":null,"topics":["angular","observable","odometer","rxjs"],"latest_commit_sha":null,"homepage":"http://sawyerbutton.github.io/angular-odometer-demo/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sawyerbutton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-10-31T13:08:32.000Z","updated_at":"2018-11-05T10:34:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea7518c2-6e82-484a-863b-d69c019640a2","html_url":"https://github.com/sawyerbutton/angular-odometer-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sawyerbutton/angular-odometer-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fangular-odometer-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fangular-odometer-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fangular-odometer-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fangular-odometer-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sawyerbutton","download_url":"https://codeload.github.com/sawyerbutton/angular-odometer-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sawyerbutton%2Fangular-odometer-demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263431755,"owners_count":23465543,"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","observable","odometer","rxjs"],"created_at":"2024-12-14T02:37:46.989Z","updated_at":"2026-04-21T16:04:02.286Z","avatar_url":"https://github.com/sawyerbutton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularOdometerDemo\n\n## Odometer组件 Angular版本应用\n\n[demo地址](https://sawyerbutton.github.io/angular-odometer-demo/odometer)\n\n### 安装Odometer 4 angular 组件库\n\n```bash\nnpm install ng2-odometer --save\n```\n\n### 引入Odometer模块\n\n```typescript\nimport {NgModule, NgModuleRef, OnDestroy} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OdometerComponent } from './odometer.component';\nimport {OdometerRoutingModule} from './odometer-routing.module';\nimport { Ng2OdometerModule} from 'ng2-odometer';\nimport {OdometerService} from './odometer.service';\n\n@NgModule({\n  imports: [\n    CommonModule,\n    OdometerRoutingModule,\n    Ng2OdometerModule.forRoot()\n  ],\n  declarations: [OdometerComponent],\n  providers: [OdometerService]\n})\nexport class OdometerModule implements OnDestroy {\n  constructor(\n    private lazy: NgModuleRef\u003cOdometerModule\u003e,\n  ) {\n    console.log('OdometerModule has been created');\n  }\n  ngOnDestroy() {\n    console.log('OdometerModule has been destroyed');\n    this.lazy.destroy();\n  }\n}\n```\n\n### 使用Odometer组件\n\n- 使用`\u003cng2-odometer\u003e\u003c/ng2-odometer\u003e`的方式创造Odometer组件\n- `[number]`是必须的属性，其代表了`Odometer`显示的最大数值\n- `[config]`参数用来进行自定义配置，可选\n\n```html\n\u003cdiv\u003e\n  \u003cp\u003e\n    \u003cng2-odometer [number]=\"number$ | async\" [config]=\"{theme: 'train-station', format: 'd', animation:'slide' }\"\u003e\u003c/ng2-odometer\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003e 值得注意的是，可以对number属性进行修改以达到修改`Odometer`组件显示数值的效果\n\n\u003e 在手动模式下，`[config]=\"{ auto: false }`，可以更新通过更改`number`属性触发`Odometer`更新\n\n\u003e `observable`是一个观察者用以触发更新事件\n\n```typescript\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### 组件参数\n\n- animation: string (`slide`,`count`)\n\n- format: string (`d`,`(.ddd),dd`,`(,ddd)`,`(,ddd).dd`,`( ddd),dd`)\n\n- theme: string (`default`,`minima`, `digital`, `car`, `plaza`, `slot-machine`, `train-station`)\n\n- value: number (`0`,...)\n\n- auto: boolean (`true`,`false`)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fangular-odometer-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsawyerbutton%2Fangular-odometer-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsawyerbutton%2Fangular-odometer-demo/lists"}