How to go from html element to angular component instance?

Question

I would like to find out which underlying Angular component instance is behind the creation of a html element.

I need to capture various mouse and touch events, but because there are so many instances (10k+) created, I wish to only capture the events at parent level (for performance) and then deduct the source component's instance from the event.target.

Basically, it's the same feature that Augury has, where you can point and click on any html element and see which component instance it is derived from.

I would greatly appreciate any help on this.

Answer 1

In debug mode, Angular applications can use ng.probe—this is exactly what tools like Augury do. For performance reasons, the metadata required by ng.probe is not available on production builds which, as far as I know, means you'll have to keep track of the element-to-component mapping yourself.

To keep track of the element-to-component mapping yourself, the easiest (albeit definitely not the most memory-efficient) option I can think of is to define a custom renderer that maintains this mapping—Angular's own DebugRenderer might serve as inspiration.