Menu
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++);
}
202
Click on "Enable Change Detection" from the given list. Select "Enable" or "Disable" operation based on your requirement. If you select Disable, skip to the last step.
Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application's view. Change detection can be triggered either manually or through an asynchronous event (for example, a user interaction or an XMLHttpRequest completion).
But with OnPush strategy, the change detector is only triggered if the data passed on @Input() has a new reference. This is why using immutable objects is preferred, because immutable objects can be modified only by creating a new object reference.
The main idea behind the OnPush strategy manifests from the realization that if we treat reference types as immutable objects, we can detect if a value has changed much faster. When a reference type is immutable, this means every time it is updated, the reference on the stack memory will have to change.
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
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
