Component specific HostListener in angular 2

Question

I'm developing an app in Angular 2 in which I have a parent component and child component. The child component has a HostListener of keydown event and executes some functionality. I'm able to achieve this, but the problem is if I press any key in context of the parent component then HostListener also executes. What I want is HostListener to execute if I'm in context of the child component.

This is not working as I intend to. It is in child Component

@HostListener('keydown', ["$event"])
ondropdown(){ functionality }

This is working but on the whole page, I even tried 'window' but the effect is same.

@HostListener('document:keydown', ["$event"])
ondropdown(){ //functionality }

Key listeners are generally triggered based on where the focus is. How do you determine if focus is on the host element? — Lazar Ljubenović
Yea and in absence of any focus I feel like it would just trigger globally, virtually the same thing as a document listener. — diopside

Vega Vega · Accepted Answer · 2017-08-23T12:39:47

It seems to me that you have a bubbling. In this case you should stop the event bubbling from the child component to the parent and prevent the default event from the parent to child .

For the child:

  @HostListener('keydown', ["$event"])
    ...
      event.stopPropagation();
    }

For the parent:

  @HostListener('keydown', ["$event"])
    ...
      event.preventDefault();
    }

Component specific HostListener in angular 2

1 Answers