[Feature request]: Remove costly repeated HostListeners on document:mousedown

[jneuhaus20]

Description

Use a utility method to register a single mousedown listener for the entire library and have component instances subscribe as needed.

Problem Statement/Justification

The repeated @HostListener('document:mousedown', ['$event']) hamper performance considerably.

In my scenario, I display a component for each item in a list from an API. A single ngx-editor instance in my setup has 5 bindings: two for ColorPickerComponent, one for LinkComponent, one for DropdownComponent, and one for ImageComponent. As the number of entries in the list increases, the performance of the whole site slows to a crawl. With 200 items, Chrome hangs for 4-5 seconds while handling the mousedown event, even when clicking on a non-interactive background region.

There are some techniques to get around this, but they involve changing app architecture, e.g. to use virtual scrolling or paging to limit the number of components in the DOM at once, which is not easy or even always an option.

An alternative solution could be to try focusout instead, which might limit the event handlers invoked to only the relevant components.

Additional Information

I'm using ngx-editor 17.5.4 and Angular 18.2 with zone.js. Haven't tried with zoneless.

The issue is also referenced in this StackOverflow article: Detect click outside Angular component with possible solutions.

Willing to submit a PR?

No