From 2ebcb07403718799e585ca132652204580a9eafd Mon Sep 17 00:00:00 2001
From: Kacper Madej <kacper@blacklabel.pl>
Date: Fri, 28 Sep 2018 17:38:38 +0200
Subject: [PATCH] feat: Added support for optional running Highcharts outside
 of Angular. Closes #75.

---
 README.md                                     |  8 +++++++
 .../src/lib/highcharts-chart.component.ts     | 23 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4299be6..67d5e6b 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,7 @@ In the same file (app.component.ts) add to the **template** Highcharts-angular c
 
   [(update)]="updateFlag"
   [oneToOne]="oneToOneFlag"
+  [runOutsideAngular]="runOutsideAngularFlag"
 
   style="width: 100%; height: 400px; display: block;"
 ></highcharts-chart>
@@ -93,6 +94,7 @@ export class AppComponent {
   chartCallback = function (chart) { ... } // optional function, defaults to null
   updateFlag = false; // optional boolean
   oneToOneFlag = true; // optional boolean, defaults to false
+  runOutsideAngular = false; // optional boolean, defaults to false
   ...
 ```
 
@@ -165,6 +167,12 @@ The option is **optional**, defaults to `false`. The `oneToOne` parameter for [u
 
 The options is presented in [the demo](#demo-app) in the first chart - try setting new chart options with different amounts of series in [the textarea input](https://github.com/highcharts/highcharts-angular/blob/36e158e684b5823e1b1bd1cedf75548022eba1a9/src/app/app.component.html#L7) to see this options in action.
 
+7. `[runOutsideAngular]="runOutsideAngularFlag"`
+
+The option is **optional**, defaults to `false`. When this option is set to `true` chart is created and updated outside of Angular's zone and Highcharts events do not trigger Angular change-detection. Details about `runOutsideAngular` are available in [Angular documentation](https://angular.io/api/core/NgZone#runoutsideangular). This options is more useful for bigger, more complex application (see [discussion](https://github.com/highcharts/highcharts-angular/pull/73)).
+
+The option is presented in [this demo](https://codesandbox.io/s/k24qxvzlk7).
+
 
 
 ## Highcharts instance details
diff --git a/highcharts-angular/src/lib/highcharts-chart.component.ts b/highcharts-angular/src/lib/highcharts-chart.component.ts
index 7dd3786..01b1ffd 100644
--- a/highcharts-angular/src/lib/highcharts-chart.component.ts
+++ b/highcharts-angular/src/lib/highcharts-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, NgZone } from '@angular/core';
 
 @Component({
   selector: 'highcharts-chart',
@@ -8,17 +8,19 @@ export class HighchartsChartComponent implements OnDestroy {
   @Input() Highcharts: any;
   @Input() constructorType: string;
   @Input() callbackFunction: any;
+  @Input() oneToOne: boolean; // #20
+  @Input() runOutsideAngular: boolean; // #75
+
   @Input() set options(val: any) {
     this.optionsValue = val;
-    this.updateOrCreateChart();
+    this.wrappedUpdateOrCreateChart();
   }
   @Input() set update(val: boolean) {
     if (val) {
-      this.updateOrCreateChart();
+      this.wrappedUpdateOrCreateChart();
       this.updateChange.emit(false); // clear the flag after update
     }
   }
-  @Input() oneToOne: boolean; // #20
 
   @Output() updateChange = new EventEmitter<boolean>(true);
 
@@ -26,9 +28,20 @@ export class HighchartsChartComponent implements OnDestroy {
   private optionsValue: any;
 
   constructor(
-    private el: ElementRef
+    private el: ElementRef,
+    private _zone: NgZone // #75
   ) {}
 
+  wrappedUpdateOrCreateChart() { // #75
+    if (this.runOutsideAngular) {
+      this._zone.runOutsideAngular(() => {
+        this.updateOrCreateChart()
+      });
+    } else {
+      this.updateOrCreateChart();
+    }
+  }
+
   updateOrCreateChart() {
     if (this.chart && this.chart.update) {
       this.chart.update(this.optionsValue, true, this.oneToOne || false);