how to disable angular2 change detection for 3rd party libraries

Question

I have google maps which triggers 100+ times per second change detection. how to disable change detection for this.

Click here for map preview

it will be even worse when using mouseover event.

ngDoCheck() {
  console.log('do check', this.i++);
}

Answer 1

I had the same issue, try injecting the NgZone class on your component constructor

constructor(private zone: NgZone) {

)

then, use the runOutsideAngular method from NgZone to put in a callback the draw method from google charts, do something like this.

this.zone.runOutsideAngular(() => {
    var chart = new google.visualization.PieChart(nativeElement);
    chart.draw(dataTable, options);
})

This make the executed code don't fire angular detection changes. Apply this for each chart you make. I hope find this helpful.

Thanks to this

Answer 2

Another option to temporary disable change detection ChangeDetectorRef

enabled = true;  
constructor(private ref: ChangeDetectorRef)

toggleChangeDetection() {
  if (this.enabled) 
  {
    this.enabled = false;
    this.ref.detach();
  }
  else {
    this.enabled = true;
    this.ref.reattach();
}