@HostListener events are within the Angular Zone and trigger change detection on the Host element and all child elements. This can get unwieldy if the drop zone has a bunch of items as it will trigger change detection on all components in the hierarchy every time the user moves the mouse on drag.
For this library, it seemed appropriate to change only the dragover. It's the method called most often, and you aren't doing anything with the component references, you're only updating the DOM.
Even though this moves the event outside the Angular Zone, we can still invoke EventEmitters. If the user needs to run change detection on dragOver, they can do so manually by subscribing to the EventEmitter and running changeDetectorRef.detectChanges() (they would have had to injected ChangeDetectorRef).
The eventListener needs to be cleaned up on component destroy, so I had store the reference to the function as a private instance variable.
reppners
commented
6 years ago
@HostListenerevents are within the Angular Zone and trigger change detection on the Host element and all child elements. This can get unwieldy if the drop zone has a bunch of items as it will trigger change detection on all components in the hierarchy every time the user moves the mouse on drag.For this library, it seemed appropriate to change only the
dragover. It's the method called most often, and you aren't doing anything with the component references, you're only updating the DOM.Even though this moves the event outside the Angular Zone, we can still invoke EventEmitters. If the user needs to run change detection on
dragOver, they can do so manually by subscribing to the EventEmitter and runningchangeDetectorRef.detectChanges()(they would have had to injectedChangeDetectorRef).The eventListener needs to be cleaned up on component destroy, so I had store the reference to the function as a private instance variable.
Before this change:
After this change