Merge branch 'master' into master

jmandreslopez · Jun 15, 2017 · a48a563 · a48a563
2 parents e089aac + 64773bd
commit a48a563
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -2,8 +2,6 @@
 
 Odometer for Angular2 that wraps HubSpot's Odometer [http://github.hubspot.com/odometer/docs/welcome/](http://github.hubspot.com/odometer/docs/welcome/)
 
-
-
 ## Quick Start
 
 ```
@@ -47,21 +45,38 @@ export class AppModule {
 
 ## Usage 
 
-Use the `<ng2-odometer></ng2-odometer>` component to create an odometer. The `number` and `observable` are required attributes. 
-The `number` represents the limit at which the odometer will travel. The `observable` is an Observable which will be used as a trigger for the odometer. 
+Use the `<ng2-odometer></ng2-odometer>` 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: `
+        ...
+        <ng2-odometer [number]="number" [config]="{ }"></ng2-odometer>
+        <!-- Further content here -->
+        ...
+   `
+})
+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: `
         ...
-        <ng2-odometer [number]="1000" [observable]="observable"></ng2-odometer>
+        <ng2-odometer [number]="number" [config]="{ auto: false }" [observable]="observable"></ng2-odometer>
         <!-- Further content here -->
         ...
    `
 })
 export class MainElementComponent {
+  public number: number = 1000;
   public observable: Observable<boolean>;
   private observer: Observer<boolean>;
 
@@ -84,9 +99,9 @@ The component accepts either a `[config]="{ ... }"` attribute with an object wit
 | `format`      | string    | '(,ddd)'    | Format to apply on the numbers. <br> Format - Example: <br> (,ddd) - 12,345,678 <br> (,ddd).dd - 12,345,678.09 <br> (.ddd),dd - 12.345.678,09 <br> ( ddd),dd - 12 345 678,09 <br> d         -  12345678
 | `theme`       | string    | 'default'   | The desired theme. <br> 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: `
@@ -100,7 +115,7 @@ The component accepts either a `[config]="{ ... }"` attribute with an object wit
         <ng2-odometer 
             [number]="1000" 
             [observable]="observable"
-            [config]="{ animation: 'count', format: 'd', theme: 'car', value: 50 }">
+            [config]="{ animation: 'count', format: 'd', theme: 'car', value: 50, auto: false }">
         </ng2-odometer>
         <!-- Further content here -->
 
@@ -110,7 +125,8 @@ The component accepts either a `[config]="{ ... }"` attribute with an object wit
             [animation]="'count'"
             [format]="'d'"
             [theme]="'car'"
-            [value]="0">
+            [value]="0",
+            [auto]="false">
         </ng2-odometer>
         <!-- Further content here -->
         ...
@@ -121,7 +137,8 @@ export class MainElementComponent {
         animation: 'count', 
         format: 'd', 
         theme: 'car', 
-        value: 50
+        value: 50,
+        auto: true,
     }
 
     ...
@@ -150,6 +167,7 @@ Then go to [http://localhost:4200](http://localhost:4200/) to check the demo run
 
 ## TODO:
 
+* Update to Angular4
 * Add tests to the library and demo
 * Add new themes
 * Create a Directive also

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -1,9 +1,10 @@
 <h1>Odometer for Angular2</h1>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'default'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'minimal'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'car'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'plaza'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'slot-machine'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'train-station'"></ng2-odometer></p>
-<p><ng2-odometer [number]="3000" [observable]="observable" [theme]="'digital'"></ng2-odometer></p>
+<p><ng2-odometer [number]="number" [theme]="'default'"></ng2-odometer></p> <!-- this trigger right away -->
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'default'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'minimal'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'car'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'plaza'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'slot-machine'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'train-station'"></ng2-odometer></p>
+<p><ng2-odometer [number]="2000" [config]="{ auto: false }" [observable]="observable" [theme]="'digital'"></ng2-odometer></p>
 <p><button (click)="trigger()">Trigger</button></p>
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -7,11 +7,15 @@ import { Observable, Observer } from 'rxjs';
     templateUrl: 'app.component.html'
 })
 export class AppComponent {
+    public number: number = 3000;
     public observable: Observable<boolean>;
     private observer: Observer<boolean>;
 
     constructor() {
         this.observable = new Observable<boolean>((observer: any) => this.observer = observer).share();
+
+        // For auto mode
+        setTimeout(() => this.number += this.number, 5000); // Update on 5 seconds
     }
 
     public trigger() {

diff --git a/src/odometer/odometer.component.ts b/src/odometer/odometer.component.ts
@@ -1,11 +1,11 @@
 ///<reference path="odometer.d.ts" />
 
 /**
- * Created by Jose Andres on 02.23.17
+ * Created by Jose Andres on 6.15.17
  */
 
 import * as _ from 'lodash';
-import { Component, ViewEncapsulation, Input, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, ViewEncapsulation, Input, OnInit, OnDestroy, OnChanges, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { Subscription, Observable } from 'rxjs';
 import { OdometerModel } from './odometer.model';
 import { Ng2OdometerConfig, Ng2OdometerConfigModel } from './odometer.config';
@@ -52,10 +52,10 @@ const Odometer = require('odometer');
     ],
     template: `<div #container></div>`
 })
-export class Ng2OdometerComponent implements OnInit, OnDestroy, AfterViewInit {
+export class Ng2OdometerComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
     @ViewChild('container', { read: ElementRef }) container: ElementRef;
     @Input() number: number; // Required
-    @Input() observable: Observable<boolean>; // Required
+    @Input() observable: Observable<boolean> = undefined;
     @Input() config: Ng2OdometerConfigModel = {};
     @Input() animation: string = undefined;
     @Input() format: string = undefined;
@@ -89,6 +89,10 @@ export class Ng2OdometerComponent implements OnInit, OnDestroy, AfterViewInit {
                 format: this.config.format,
                 theme: this.config.theme,
             });
+
+            if (!_.isUndefined(this.number) && this.config.auto) {
+                this.odometer.update(this.number);
+            }
         }
     }
 
@@ -130,7 +134,7 @@ export class Ng2OdometerComponent implements OnInit, OnDestroy, AfterViewInit {
     public ngOnInit() {
 
         // Bind Observable
-        if (!_.isUndefined(this.observable)) {
+        if (!_.isUndefined(this.observable) && !this.config.auto) {
             this.subscription = this.observable.subscribe((trigger: boolean) => {
                 if (!_.isUndefined(trigger) && trigger) {
                     this.odometer.update(this.number);
@@ -149,6 +153,12 @@ export class Ng2OdometerComponent implements OnInit, OnDestroy, AfterViewInit {
         }
     }
 
+    public ngOnChanges() {
+        if (!_.isUndefined(this.number) && !_.isUndefined(this.odometer) && this.config.auto) {
+            this.odometer.update(this.number);
+        }
+    }
+
     public ngAfterViewInit() {
         this.initOdometer();
     }

diff --git a/src/odometer/odometer.config.ts b/src/odometer/odometer.config.ts
@@ -1,5 +1,5 @@
 /**
- * Created by Jose Andres on 02.23.17
+ * Created by Jose Andres on 6.15.17
  */
 
 import { Component } from '@angular/core';
@@ -11,6 +11,7 @@ export interface Ng2OdometerConfigModel {
     theme?: string;
     value?: number;
     duration?: number;
+    auto?: boolean;
 }
 
 export class Ng2OdometerConfig implements Ng2OdometerConfigModel {
@@ -19,4 +20,5 @@ export class Ng2OdometerConfig implements Ng2OdometerConfigModel {
     theme?: string = 'default';
     value?: number = 0;
     duration?: number = 2000;
+    auto?: boolean = true;
 }