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.

user4091335 · Accepted Answer · 2018-03-22 22:22:37Z

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.

answered Mar 22, 2018 at 22:22

user4091335

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to go from html element to angular component instance?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related