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