title: Angular HostListener event from Child Component to Parent Component
body: <p>I have two components - Parent and Child component.
  I have attached hostlistener to both component to detect key events.
  I want to detect space key event in both components. If user presses space key in child component text field then i want parent component to do nothing. But if user is not in child component text field and presses space key then i want parent component to trigger a function.  </p>
  
  <pre><code>export class ParentComponent {
  
   constructor() { }
  
   @HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) { 
    console.log("PARENT", event.keyCode);
   }
  }
  
  export class ChildComponent {
  
   constructor() { }
  
   @HostListener('window:keyup', ['$event'])
    keyEvent(event: KeyboardEvent) { 
    console.log("CHILD", event.keyCode);
   }
  }
  </code></pre>
  
  <p>Here events are getting captured but in specific order - first PARENT and then CHILD. What i want these events to be - first captured by CHILD so that i can decide what to do in parent component or can stop event propagation.</p>