CODEWITHSUNDEEP
angular
Moon
Moon

Reputation: 269

angular2 events lead to check data change

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.

Upvotes: 1

Views: 396

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657308

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(....)
  });
}

Upvotes: 1

anshuVersatile
anshuVersatile

Reputation: 2068

you can use 

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

instead $(window).mousemove()

will increase your performance

Upvotes: 1

Related Questions