title: How to use the HostListener decorator correctly to call a superclass function?
body: <p>I´m currently struggling replacing the <em>host</em> metadata by <em>HostListener</em> and <em>HostBinding</em> according to the <a href="https://angular.io/guide/styleguide#hostlistenerhostbinding-decorators-versus-host-metadata" rel="nofollow noreferrer">official Angular styleguide</a>. The starting point is as follows: I have a custom directive inherited from ng bootstrap superclass ngCheckBox. In the old spelling with the host metadata everything worked great. But if I now try to switch to the new best practice, I get the error message:  </p>
  
  <pre><code>Cannot read property 'target' of undefined
      at CustomCheckBoxDirective.NgbCheckBox.onInputChange
  </code></pre>
  
  <p>I suspect that I am using the decorator HostListener incorrectly. </p>
  
  <p><strong>How can I use the HostListener correctly to access a superclass function?</strong></p>
  
  <hr>
  
  <p><em>CustomDirective with host metadata:</em> </p>
  
  <pre><code>@Directive({
    selector: '[customButton][type=checkbox]',
    host: {        
      '(change)': 'onInputChange($event)'        
    },
    providers: [CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR]
  })
  export class CustomCheckBoxDirective extends NgbCheckBox {
    constructor(private myLabel: CustomButtonLabelDirective) {
      super(myLabel);
    }
  } 
  </code></pre>
  
  <p><em>CustomDirective with HostBinding / HostListener:</em>   </p>
  
  <pre><code>@Directive({
    selector: '[customButton][type=checkbox]',
    providers: [CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR]
  })
  export class CustomCheckBoxDirective extends NgbCheckBox {      
    @HostListener('change') changeListener($event: any) {
      this.onInputChange($event);
    }      
  
  
    constructor(private myLabel: CustomButtonLabelDirective) {
      super(myLabel);
    }
  </code></pre>
  
  <p><em>NgbCheckBox super class</em>:  </p>
  
  <pre><code>export declare class NgbCheckBox implements ControlValueAccessor {       
      // ...
      onInputChange($event: any): void;
      // ...
  }
  </code></pre>