angular2 events lead to check data change

Question

I'm using a Jquery plugin in my angular2 project. It has a serious performance problem if the plugin has an event like $(window).mousemove() or setInterval(function(){}, 10). Because zone.js has hooks to html events, the page always checks data changes. My cpu is running very high.

Answer 1

you can use

@HostListener('mousemove', ['$event'])
  onMousemove(event: MouseEvent) { this.mousemove.emit(event); } 

instead $(window).mousemove()

will increase your performance

Answer 2

You can use NgZone to make code run inside or outside of Angulars zone.

Outside for performance reasons, inside to ensure Angular gets notified that change detection has to be run when properties of a component, model, or service are modiefied:

constructor(private zone:NgZone) {
  zone.runOutsideAngular(() => {
    $(window).mousemove()...;
    setInterval(() => {}, 10);
  })
}

onMouseMove() {
  this.zone.run(() => {
    this.someProp = 'someValue';
    this.router.navigate(....)
  });
}