title: Angular Directive, cannot attach event listener to element
body: <p>I try to bind a <code>keyup</code> event to an input element inside an attribute directive.
  I've tried normal ways like <code>element.nativeElement.onkeyup</code> or <code>element.nativeElement.addEventListener('keyup', () =&gt; {})</code> but when I type, nothing happens.</p>
  
  <p>Now, I try using <code>HostListener</code> writing code like this</p>
  
  <pre><code>@HostListener('keyup', ['$event']) onKeyup(e) {}
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Turns out, @HostListener has to be top level to work. But still, nothing happens when I type on the input. Here's the full code for the directive.</p>
  
  <pre><code>import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[appKeyUp]'
  })
  export class KeyUpDirective implements OnInit {
      constructor(private el: ElementRef) { }
  
      ngOnInit() {
          console.log('directive initiated');
      }
      @HostListener('keyup', [$event]) onKeyUp(e) {
          console.log(e);
      }
  }
  </code></pre>
  
  <p>What is going wrong this time?</p>