odometer-ngx  

$3

Odometer for [Angular 17]() of HubSpot's Odometer: NPM/GitHub

$3

I have updated this Angular 17 version starting from the existing Ng2Odometer by Jose Andres and the Angular 9 version done by Marco Trinastich.

This project was generated with Angular CLI version 15.10.0.

$3

GitHub: http://github.hubspot.com/odometer/docs/welcome/

$3

NPM: https://www.npmjs.com/package/ng2-odometer/ (credits: Jose Andres)

Quick Start

``
npm install odometer-ngx --save
`

Table of contents

- Setup
- Usage
- Configuration
- Demo

Setup

First you need to install the npm module:
`sh
npm install odometer-ngx --save
`

Then add the TmNgOdometerModule to the imports array of your application module.

`typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TmNgOdometerModule } from 'odometer-ngx'; // <-- import the module
import { AppComponent} from './app.component';

@NgModule({
imports: [
BrowserModule,
TmNgOdometerModule // <-- include it in your app module
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {
//
}
`

Usage

Use the component to create an odometer. The number is required attribute.
The number 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((observer: any) => this.observer = observer).pipe(share());

// Trigger odometer after 2s
setTimeout(() => this.observer.next(true), 2000);
}
}
`

Configuration

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.
Options: 'slide', 'count'
| format | string | '(,ddd)' | Format to apply on the numbers.
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
| theme | string | 'default' | The desired theme.
Options: 'default', 'minima', 'digital', 'car', 'plaza', 'slot-machine', 'train-station'
| value | number | 0 | Initial value of the odometer
| auto | boolean | true | Setup auto or manual mode for the odometer

`js
@Component({
selector: 'main-element',
template:
...
[number]="1000"
[observable]="observable"
[config]="config">

[number]="1000"
[observable]="observable"
[config]="{ animation: 'count', format: 'd', theme: 'car', value: 50, auto: false }">

[number]="1000"
[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.

Demo

The demo subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of tm-ng-odometer.
To execute the code follow this steps:

`
// Go the the demo folder
cd demo

// Install dependencies
npm install / yarn install

// Run the server
ng serve
``

Then go to http://localhost:4200 to check the demo running.

DONE:

* Update to Angular 17

License

MIT