Output EventEmitter is always undefined
<p>I've got a component which needs to emit a value but I cannot for the love of god figure out why the <code>@Output()</code> is always <code>undefined</code> when I call it. I have the exact same code in other components and trigger it the same way but it just does not want to work in this case. </p>

<p>Is there anything wrong I'm doing here?</p>

<pre><code>export class DropdownOptionsSingleComponent implements AfterViewInit {
  @Input() current: any;
  @Output('currentChange') onCurrentChange: EventEmitter&lt;any&gt; = new EventEmitter();

  private isOpen: boolean = false;

  constructor(private _globals: GlobalVariablesService, private _elementRef: ElementRef) {
    this.ns = _globals.ns;

    document.addEventListener('click', (e) =&gt; {

      // If the clicked element is not the component element or any of its children, close the dropdown
      if (_elementRef.nativeElement !== e.target &amp;&amp; !_elementRef.nativeElement.contains(e.target)) {
        this.isOpen = false;
      }
    });
  }

  ngAfterViewInit() {

    let list = this._elementRef.nativeElement.getElementsByClassName(this.ns + '-dos-list')[0];
    let options = list.getElementsByTagName('li');

    for (let option of options) {
      option.addEventListener('click', this.select);
    }
  }

  toggle() {

    if (this.disabled) {
      this.isOpen = false;

      return false;
    }

    this.isOpen = !this.isOpen;
  }

  close() {
    this.isOpen = false;
  }

  select(e) {
    this.current = e.target.getAttribute('data-model');

    // Error saying this.onCurrentChange is undefined...
    this.onCurrentChange.emit(this.current);
  }
}
</code></pre>