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;" > @@ -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(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);