Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jmandreslopez/ng2-odometer
Odometer for Angular2
https://github.com/jmandreslopez/ng2-odometer
angular angular-cli angular2 javascript odometer typescript
Last synced: 4 months ago
JSON representation
Odometer for Angular2
- Host: GitHub
- URL: https://github.com/jmandreslopez/ng2-odometer
- Owner: jmandreslopez
- License: mit
- Created: 2017-02-24T06:27:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-09-03T23:14:37.000Z (over 4 years ago)
- Last Synced: 2024-09-28T15:22:53.249Z (4 months ago)
- Topics: angular, angular-cli, angular2, javascript, odometer, typescript
- Language: TypeScript
- Homepage:
- Size: 36.1 KB
- Stars: 23
- Watchers: 4
- Forks: 17
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ng2-odometer [](https://www.npmjs.com/package/ng2-odometer) [](http://opensource.org/licenses/MIT)
Odometer for Angular2 that wraps HubSpot's Odometer [http://github.hubspot.com/odometer/docs/welcome/](http://github.hubspot.com/odometer/docs/welcome/)
## Quick Start
```
npm install ng2-odometer --save
```
## Table of contents
- [Setup](#setup)
- [Usage](#usage)
- [Configuration](#configuration)
- [Demo](#demo)
## Setup
First you need to install the npm module:
```sh
npm install ng2-odometer --save
```
Then add the `Ng2OdometerModule` to the imports array of your application module.
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Ng2OdometerModule } from 'ng2-odometer'; // <-- import the module
import { AppComponent} from './app.component';
@NgModule({
imports: [
BrowserModule,
Ng2OdometerModule.forRoot() // <-- 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).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: `
...
...
`
})
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](demo) subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of ng2-odometer.
To execute the code follow this steps:
```
// Go the the demo folder
cd demo
// Install dependencies
npm install
// Run the server
ng serve
```
Then go to [http://localhost:4200](http://localhost:4200/) to check the demo running.
## TODO:
* Update to Angular4
* Add tests to the library and demo
* Add new themes
* Create a Directive also
## License
[MIT](LICENSE)