Angular rerenders when user hovers over Openlayers map

Question

I am using Openlayers 6 in my project alongside Angular 8. And up until now i noticed that whenever i hover over Openlayers map, Angular component, where the map is located, gets re-rendered.

My question is how do i make parent component stop re-rendering on that hover all the time. Because it slows down the app. I have a much bigger component in my project and making everything re-render because of this, will make the app itself slower.

For this purpose i created a repo to demonstrate this: https://github.com/petrovichm/angular-openlayers-hover-problem. In this example i added a method in html that will log when it is run, thus giving a overview how many times is angular re rendering component.

I wanted to create online runnable with plunker or codesanbox but when i make this example window freezes because there is endless loop in re-render, which makes them unusable, that doesn't happen really when i run this project locally, it only happens on hover

Thanks.

Have you tried to use the on push change detection strategy to prevent this? `@Component({ ..., changeDetection: ChangeDetectionStrategy.OnPush })` This should prevent the issue that you are talking about. — Daniel W Strimpel, Feb 07 '20 at 22:22

score 3 · Accepted Answer · answered Feb 07 '20 at 23:36

After cloning your repo to look at things, there are two things.

First, the use case is very simple so you won't see all of the benefits from using the on push change detection strategy that mitigates most of this issue since it won't cause non-root components to have a change detection cycle (if all components use the on push strategy that is).

Second, since the underlying map library (OpenLayers) is attaching events to DOM nodes itself, that will cause Angular's change detection to fire due to zone.js intercepting the event handling. To prevent this, you will have to set up the map outside of the Angular zone:

import { ..., NgZone } from '@angular/core';

...
export class AppComponent implements OnInit {
  ...

  construtor(private zone: NgZone) {
  }

  ...

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      this.map = new Map({ ... });
    });
  }
}

You have to be careful when running things outside of the Angular zone, but it makes sense here to do so to prevent your issues. You will have to wrap any logic in event handling of your map back in the Angular zone so that Angular will know about the updates.

export class AppComponent implements OnInit {
  currentValue = 0;

  ...

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      this.map = new Map({ ... });
    });

    this.map.on('click', (e) => {
      this.currentValue++; // Angular will not pick up this change because it will run outside of the Angular zone
    });

    this.map.on('click', (e) => {
      this.zone.run(() => {
        this.currentValue++; // Angular will pick up this change because it will run inside the Angular zone
      });
    });
  }
}

Here is a good blog post that I think can further help understanding this: https://netbasal.com/optimizing-angular-change-detection-triggered-by-dom-events-d2a3b2e11d87.

Hey man, thanks for the tip. I will try it out next week and give you feedback then. I didnt know that you can detach like that from zone. I did it with detecChanges.detach() service method. But it didnt work with that also. Thanks again — Mario Petrovic, Feb 08 '20 at 00:49
This solution works actually. Thanks for your answer. It will make a bigger boilerplate but hey, it speeds up the app definitely. — Mario Petrovic, Feb 13 '20 at 16:21

Angular rerenders when user hovers over Openlayers map

1 Answers1