Angular 2: ChangeDetection and mousemove event

Question

I have an Angular 2 Component with many children. Because of performance issues, I wanted to check how often the ChangeDetection checks my child-components. So I logged the ngAfterViewChecked-callback of one of my child-components.

I realized that my parent-component has a mousemove()-callback and so my childrens ngAfterViewChecked gets called every time I move my mouse over the parent. But I'm not updating any component variables in my mousemove()-callback. Why is the ChangeDetection running for the children then and how can I stop this?

I hope you understand the problem (if not please comment, so I can clarify things).

[This article is for you](https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html) — Paul Samsotha, Apr 12 '17 at 09:00
Same for me, content where the mousemoves cause rerendering contains a Highcharts graphics. — Janos Vinceller, Oct 28 '20 at 15:54

score 12 · Accepted Answer · answered Apr 12 '17 at 09:16

The site peeskillet provided shows how to exclude eventlistener from ChangeDetection:

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

@Component(...)
export class AppComponent {
...
  element: HTMLElement;

  constructor(private zone: NgZone) {}

  mouseDown(event) {
  ...
    this.element = event.target;

    this.zone.runOutsideAngular(() => {
      window.document.addEventListener('mousemove', this.mouseMove.bind(this));
    });
  }

  mouseMove(event) {
    event.preventDefault();
    this.element.setAttribute('x', event.clientX + this.clientX + 'px');
    this.element.setAttribute('y', event.clientX + this.clientY + 'px');
  }
}

For further information I can really recommend this article. Big THX to peeskillet!

Thanks, I tried to put `zone.runOutsideAngular(..` inside the event handler. This helped me solve the problem at hand. — Arg0n, Aug 08 '17 at 14:09
It depends on what you want to do inside your event listener. Not all use-cases need a separate zone. But glad it works for you. — ant45de, Aug 09 '17 at 08:49

Angular 2: ChangeDetection and mousemove event

1 Answers1