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).

Answer 1

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!