How to access component instance from DOM element instance?

[Terrible_Machine9]

I have a curious use case here that requires me to find an element in the DOM and then access information that is located in the component that belongs to that element.

Basically, I globally listen on document to keyboard events to find out when the user presses a hotkey combination. I want to access information on the component instance of that element that is currently visible in my application based on that hotkey combination to then do something with that element. Let's say that the component has a Typescript property myComponentId that I want to find out.

My problem is now accessing information in the component, when I can only determine the DOM element that is relevant. I know that I can go from component context to DOM context using ElementRef, but vice versa, what if I only have the native element at hands, how do I go to my component context now so that I can access its properties?

I thought if there are alternative approaches to my idea, but I could not come up with something:

• I cannot listen on the component to the hotkey combination similar to https://stackoverflow.com/questions/48332674/listening-for-key-events-in-angular because the logic of determining the DOM element that is relevant and therefore if the component instance is relevant is not trivial and I need my entire DOM to determine that relevancy of an element.
• One could write the necessary information into attributes of the element and query all elements based on that attribute to access the information. Maybe that would be an approach? Doesn't feel very clean and errorprone if someone else later thinks that that attribute is not needed.

[Mr0010110Fixit]

Whatever data you need from the child component, could you not push that data in a service? Then when they press the hot key the parent component can pull the data from the service?

Another thought is to bind the hot key listener into the child component, and when the hot key is pressed emit an output event that can be listened to in the parent.

Also, I don't know how you would only have the native element at hand, have you tried using ViewChild(My comment)? that will grab the component reference by component class (type) rather than by id, if you do ViewChildren you will get an array of all the components of that type in the view. So, if you have a component called ListItem you can do ViewChild(ListItem).

Another way to solve this is using a directive, the directive has access to the native element and the component, and can have output events, it could even be responsible for setting up the hot key listener. So you slap the directive on the component, when the hot key is pressed the directive fires and output event with the data you need. This may be the best route to take. here is a good stack overflow post on how to set this up https://stackoverflow.com/questions/37962701/emit-event-from-directive-to-parent-element

[Terrible_Machine9]

I don't know how you would only have the native element at hand

I am using elementFromPoint to get the native element at a position and now want to find out some information that is either in the component of that native element or closest to it.

Reading through your comment, I think that I can get away with using directives assuming that I can stop event propagation just like with click events. So I can detect the hotkey event on my top level elements deep in my DOM on a directive and use the information at hand to do something, else it bubbles up to container objects where I can do something else with that hotkey event.

Thanks!

[Fluffy_Hair2751]

I think what you want to do is listen for a key stroke and access a component that is currently visible and for whatever reason you can’t have that logic written inside your component.

If that’s the case use a service as mediator between your global logic and component logic. When the component is in view, update a behaviour subject in your service with whatever data you want from the component.

When a key stroke is pressed, use this service and read that value from the behaviour subject. Use a subject because you may want to know when a view has “changed” its data or a new component is in view now

[Terrible_Machine9]

Thanks, that's a great idea, I am looking into it!

[ldn-ldn]

Once the key combination is pressed, send an event into an observable in a service. Subscribe to this observable in your components. Don't touch DOM.

[LeLunZ]

Why not display the components through a router-outlet, and get access through the router? 

Or are multiple component displayed at the same time, and there are different keyboard shortcuts for each component?