Merge branch 'develop' into feature/restructure-and-issue-fix

- And fix the conflicts

Author: rohitkr

dist/src/fusioncharts.component.js

@@ -13,8 +13,9 @@ var core_1 = require("@angular/core");
 var fusioncharts_service_1 = require("./fusioncharts.service");
 var fusioncharts_constructor_1 = require("./fusioncharts.constructor");
 var FusionChartsComponent = (function () {
-    function FusionChartsComponent(element, fusionchartsService, differs) {
+    function FusionChartsComponent(element, fusionchartsService, differs, zone) {
         this.differs = differs;
+        this.zone = zone;
         this.oldDataSource = this.dataSource;
         this.constructerParams = {
             type: true,
@@ -81,6 +82,7 @@ var FusionChartsComponent = (function () {
     // @ViewChild('samplediv') chartContainer: ElementRef;
     FusionChartsComponent.prototype.ngOnInit = function () {
         this.oldDataSource = JSON.stringify(this.dataSource);
+        this.placeholder = this.placeholder || 'FusionCharts will render here';
     };
     FusionChartsComponent.prototype.ngOnChanges = function (changes) {
         for (var _i = 0, _a = Object.keys(changes); _i < _a.length; _i++) {
@@ -142,16 +144,22 @@ var FusionChartsComponent = (function () {
             _this.chartObj = fusioncharts_constructor_1.FusionChartsConstructor(_this.fusionchartsService, configObj);
             // configObj['renderAt'] = 'container-' + _this.chartObj.id;
             // _this.containerId = _this.chartObj.id;
-            setTimeout(function () {
-                _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
-            }, 1);
+            this.zone.runOutsideAngular(function () {
+                setTimeout(function () {
+                    _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
+                }, 1);
+            });
         }
     };
     FusionChartsComponent.prototype.ngOnDestroy = function () {
         this.chartObj.dispose();
     };
     return FusionChartsComponent;
 }());
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], FusionChartsComponent.prototype, "placeholder", void 0);
 __decorate([
     core_1.Input(),
     __metadata("design:type", Object)
@@ -383,9 +391,9 @@ __decorate([
 FusionChartsComponent = __decorate([
     core_1.Component({
         selector: 'fusioncharts',
-        template: "<div attr.id=\"container-{{containerId}}\" >FusionCharts will render here</div>\n    ",
+        template: "<div attr.id=\"container-{{containerId}}\" >{{placeholder}}</div>\n    ",
         providers: [fusioncharts_service_1.FusionChartsService],
     }),
-    __metadata("design:paramtypes", [core_1.ElementRef, fusioncharts_service_1.FusionChartsService, core_1.KeyValueDiffers])
+    __metadata("design:paramtypes", [core_1.ElementRef, fusioncharts_service_1.FusionChartsService, core_1.KeyValueDiffers, core_1.NgZone])
 ], FusionChartsComponent);
 exports.FusionChartsComponent = FusionChartsComponent;

src/angular2-fusioncharts/src/fusioncharts.component.ts

@@ -1,21 +1,22 @@
 import {Component, Input, ElementRef, OnInit,
     OnChanges, DoCheck, AfterViewInit, OnDestroy,
-    KeyValueDiffers, ViewChild} from '@angular/core';
+    KeyValueDiffers, ViewChild, NgZone} from '@angular/core';
 
 import { FusionChartsService } from './fusioncharts.service';
 import { FusionChartsConstructor } from './fusioncharts.constructor';
 
 
 @Component({
     selector: 'fusioncharts',
-    template: `<div attr.id="container-{{containerId}}" >FusionCharts will render here</div>
+    template: `<div attr.id="container-{{containerId}}" >{{placeholder}}</div>
     `,
     providers: [FusionChartsService],
 })
 export class FusionChartsComponent implements OnInit, OnChanges, DoCheck, AfterViewInit, OnDestroy {
 
     chartObj: any;
 
+    @Input() placeholder: string;
     @Input() dataSource: Object;
     @Input() type: string;
     @Input() id: string;
@@ -139,7 +140,7 @@ export class FusionChartsComponent implements OnInit, OnChanges, DoCheck, AfterV
     element: ElementRef;
     fusionchartsService: FusionChartsService;
 
-    constructor(element: ElementRef, fusionchartsService: FusionChartsService, private differs: KeyValueDiffers) {
+    constructor(element: ElementRef, fusionchartsService: FusionChartsService, private differs: KeyValueDiffers, private zone: NgZone) {
         this.element = element;
         this.fusionchartsService = fusionchartsService;
     }
@@ -148,6 +149,7 @@ export class FusionChartsComponent implements OnInit, OnChanges, DoCheck, AfterV
 
     ngOnInit() {
         this.oldDataSource = JSON.stringify(this.dataSource);
+        this.placeholder = this.placeholder || 'FusionCharts will render here';
     }
 
 
@@ -235,10 +237,11 @@ export class FusionChartsComponent implements OnInit, OnChanges, DoCheck, AfterV
             // configObj['renderAt'] = 'container-' + _this.chartObj.id;
             // _this.containerId = _this.chartObj.id;
 
-            setTimeout(() => {
-                _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
-            }, 1);
-
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    _this.chartObj.render(_this.element.nativeElement.querySelector('div'));
+                }, 1);
+            })
         }
     }