title: Angular 2 Host Event Listener bubbling
body: <p>I have built a directive which subscribes the keyboard event using host event listener. When escape key is pressed I am firing an output event like this</p>
  
  <pre class="lang-js prettyprint-override"><code>    @HostListener('document:keyup', ['$event'])
      handleKeyboardEvent(kbdEvent: KeyboardEvent) {
         if (kbdEvent.keyCode === 27) {
              this.CloseEvent.emit();
         }
      }
  </code></pre>
  
  <p>I have this directive for child elements. When escape key is pressed I want to fire the output event only for the newly subscribed elements. The problem is when I click on escape key the event is fired based on hierarchical order. I have made a demo here: <a href="https://plnkr.co/edit/FfnHAtxl2zcHsu0JilKt" rel="nofollow noreferrer">https://plnkr.co/edit/FfnHAtxl2zcHsu0JilKt</a></p>
  
  <p>Steps to reproduce:</p>
  
  <ol>
  <li>Add Multiple Child Elements</li>
  <li>Click On <kbd>Escape</kbd> it closes all elements</li>
  </ol>
  
  <p>Expected behavior:</p>
  
  <ol>
  <li>When <kbd>Escape</kbd> is clicked on the last added child element, the event needs to be fired </li>
  </ol>