Odometer for Angular9
Odometer for Angular9 that wraps HubSpot's Odometer http://github.hubspot.com/odometer/docs/welcome/
``
npm install ng9-odometer --save
First you need to install the npm module:
`sh`
npm install ng9-odometer --save
Then add the Ng9OdometerModule to the imports array of your application module.
`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng9OdometerModule } from 'ng9-odometer'; // <-- import the module
import { AppComponent} from './app.component';
@NgModule({
imports: [
BrowserModule,
Ng9OdometerModule.forRoot() // <-- include it in your app module
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
//
}
`
Use the component to create an odometer. The number is required attribute. number
The represents the limit at which the odometer will travel. The config an object with the configuration properties, this is NOT required.
`js
@Component({
selector: 'main-element',
template:
...
...
})
export class MainElementComponent {
public number: number = 1000;
}
When 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.
`js
@Component({
selector: 'main-element',
template:
...
...
})
export class MainElementComponent {
public number: number = 1000;
public observable: Observable
private observer: Observer
constructor() {
this.observable = new Observable
// Trigger odometer after 2s
setTimeout(() => this.observer.next(true), 2000);
}
}
`
The component accepts either a [config]="{ ... }" attribute with an object with all the configurable attribues or independent attributes for each configuration.
| Option | Type | Default | Description |
| --------------| --------- | ----------- |-------------- |
| animation | string | 'slide' | Animation effect type. format
Options: 'slide', 'count'
| | string | '(,ddd)' | Format to apply on the numbers. theme
Format - Example:
(,ddd) - 12,345,678
(,ddd).dd - 12,345,678.09
(.ddd),dd - 12.345.678,09
( ddd),dd - 12 345 678,09
d - 12345678
| | string | 'default' | The desired theme. value
Options: 'default', 'minima', 'digital', 'car', 'plaza', 'slot-machine', 'train-station'
| | number | 0 | Initial value of the odometerauto
| | boolean | true | Setup auto or manual mode for the odometer
`js
@Component({
selector: 'main-element',
template:
...
[observable]="observable"
[config]="config">
[observable]="observable"
[config]="{ animation: 'count', format: 'd', theme: 'car', value: 50, auto: false }">
[observable]="observable"
[animation]="'count'"
[format]="'d'"
[theme]="'car'"
[value]="0",
[auto]="false">
...
})
export class MainElementComponent {
public config = {
animation: 'count',
format: 'd',
theme: 'car',
value: 50,
auto: true,
}
...
}
`
If you add both, the [config] and any independent configuration, the independent config will overwrite the [config]` object.