Merge pull request #137 from vigie/ng2

Upgrading Angular 2 directive to be compatible with Angular version ^…

README.md

@@ -17,7 +17,9 @@ Before making a pull request, please [read this](#contributing). MIT License.
 If you are using Angular, you can use the included Angular module. Use the count-up attribute to quickly create an animation. It also integrates nicely with the Angular-scroll-spy directive. The Angular directive only requires an `end-val` attribute, but will also accept `start-val`, `duration`, `decimals`, and `options`. `id` is not needed. You must include both countUp.js and the module to use the Angular directive. **[Check out the angular demo](http://inorganik.github.io/angular-scroll-spy/)** and see usage examples below.
 
 ## Angular 2 directive
-An identical Angular 2 version of the directive is also provided. Simply import the directive from `dist/` into the `directives` array of the component you wish to use it in.
+An identical Angular 2 version of the directive compatible with version ^2.0.0 is also provided.
+Simply import the module from `dist/` into your application module's `imports` array.
+
 See example below.
 
 ## WordPress plugin
@@ -93,14 +95,26 @@ With [angular-scroll-spy](http://inorganik.github.io/angular-scroll-spy/):
 
 #### Angular 2
 
-Make sure countUp.js is loaded as a global dependency during bootstrapping.
+The directive is compatible with Angular version ^2.0.0.
+
+Make sure `countUp.js` is loaded as a global dependency during bootstrapping.
 
-Note the value for the options parameter is passed directly to the directive attribute selector.
+Note the value for the `options` parameter is passed directly to the directive attribute selector.
 
 ```ts
-import {Component} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
+
+import {CountUpModule} from 'countup.js/dist/countUp.module';
+
+@NgModule({
+   imports: [CountUpModule],
+   bootstrap: [AppComponent]
+})
+export class AppModule {}
 
-import {CountUpDirective} from 'countup.js/dist/countUp.directive';
+// ...
+// ...
+// Use in some component contained within the importing module...
 
 @Component({
    selector: 'counting-header',
@@ -109,10 +123,9 @@ import {CountUpDirective} from 'countup.js/dist/countUp.directive';
             [startVal]="myStartVal"
             [endVal]="myEndVal"
             [reanimateOnClick]="false"></h1>
-   `,
-   directives: [CountUpDirective]
+   `
 })
-export class CloudCardComponent {
+export class CountingHeaderComponent {
     @Input()
     myStartVal: number;
 

countUp.directive.ts → countUp.module.ts

@@ -4,7 +4,8 @@ import {
    Input,
    HostListener,
    Inject,
-   OnInit
+   OnInit,
+   NgModule
 } from '@angular/core';
 
 declare var CountUp;
@@ -118,3 +119,12 @@ export class CountUpDirective implements OnInit {
         }
     }
 }
+
+/**
+ * Module providing the countUp directive.
+ */
+@NgModule({
+   declarations: [CountUpDirective],
+   exports: [CountUpDirective]
+})
+export class CountUpModule {}

dist/countUp.directive.d.ts → dist/countUp.module.d.ts

@@ -15,3 +15,5 @@ export declare class CountUpDirective implements OnInit {
     private createCountUp(sta, end, dec, dur);
     private animate();
 }
+export declare class CountUpModule {
+}

dist/countUp.module.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+(function (dependencies, factory) {
+    if (typeof module === 'object' && typeof module.exports === 'object') {
+        var v = factory(require, exports); if (v !== undefined) module.exports = v;
+    }
+    else if (typeof define === 'function' && define.amd) {
+        define(dependencies, factory);
+    }
+})(["require", "exports", "@angular/core"], function (require, exports) {
+    "use strict";
+    var core_1 = require("@angular/core");
+    var CountUpDirective = (function () {
+        function CountUpDirective(el) {
+            this.el = el;
+        }
+        Object.defineProperty(CountUpDirective.prototype, "endVal", {
+            get: function () {
+                return this._endVal;
+            },
+            set: function (value) {
+                this._endVal = value;
+                if (isNaN(value)) {
+                    return;
+                }
+                if (!this._countUp) {
+                    return;
+                }
+                this._countUp.update(value);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        CountUpDirective.prototype.ngOnInit = function () {
+            this._countUp = this.createCountUp(this.startVal, this.endVal, this.decimals, this.duration);
+            this.animate();
+        };
+        CountUpDirective.prototype.onClick = function () {
+            if (this.reanimateOnClick) {
+                this.animate();
+            }
+        };
+        CountUpDirective.prototype.createCountUp = function (sta, end, dec, dur) {
+            sta = sta || 0;
+            if (isNaN(sta))
+                sta = Number(sta.match(/[\d\-\.]+/g).join(''));
+            end = end || 0;
+            if (isNaN(end))
+                end = Number(end.match(/[\d\-\.]+/g).join(''));
+            dur = Number(dur) || 2;
+            dec = Number(dec) || 0;
+            var countUp = new CountUp(this.el.nativeElement, sta, end, dec, dur, this.options);
+            if (end > 999) {
+                countUp = new CountUp(this.el.nativeElement, sta, end - 100, dec, dur / 2, this.options);
+            }
+            return countUp;
+        };
+        CountUpDirective.prototype.animate = function () {
+            var _this = this;
+            this._countUp.reset();
+            if (this.endVal > 999) {
+                this._countUp.start(function () { return _this._countUp.update(_this.endVal); });
+            }
+            else {
+                this._countUp.start();
+            }
+        };
+        return CountUpDirective;
+    }());
+    __decorate([
+        core_1.Input('countUp'),
+        __metadata("design:type", Object)
+    ], CountUpDirective.prototype, "options", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number)
+    ], CountUpDirective.prototype, "startVal", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [])
+    ], CountUpDirective.prototype, "endVal", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number)
+    ], CountUpDirective.prototype, "duration", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number)
+    ], CountUpDirective.prototype, "decimals", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Boolean)
+    ], CountUpDirective.prototype, "reanimateOnClick", void 0);
+    __decorate([
+        core_1.HostListener('click'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], CountUpDirective.prototype, "onClick", null);
+    CountUpDirective = __decorate([
+        core_1.Directive({
+            selector: '[countUp]'
+        }),
+        __param(0, core_1.Inject(core_1.ElementRef)),
+        __metadata("design:paramtypes", [core_1.ElementRef])
+    ], CountUpDirective);
+    exports.CountUpDirective = CountUpDirective;
+    var CountUpModule = (function () {
+        function CountUpModule() {
+        }
+        return CountUpModule;
+    }());
+    CountUpModule = __decorate([
+        core_1.NgModule({
+            declarations: [CountUpDirective],
+            exports: [CountUpDirective]
+        }),
+        __metadata("design:paramtypes", [])
+    ], CountUpModule);
+    exports.CountUpModule = CountUpModule;
+});

package.json

@@ -18,7 +18,9 @@
     "gulp-typescript": "^3.1.3",
     "gulp-uglify": "^1.4.2",
     "gulp-wrap-umd": "~0.2.1",
-    "typescript": "^2.0.10"
+    "rxjs": "^5.0.1",
+    "typescript": "^2.0.10",
+    "zone.js": "^0.7.2"
   },
   "scripts": {
     "build": "gulp",

tsconfig.json

@@ -1,12 +1,12 @@
 {
   "files": [
-    "countUp.directive.ts"
+    "countUp.module.ts"
   ],
   "compilerOptions": {
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "target": "es5",
-    "module": "system",
+    "module": "umd",
     "moduleResolution": "node",
     "removeComments": true,
     "sourceMap": true,