Removing EventListener in ngOnDestroy

Question

I have the following implementation of a directive. How to removeEventListener in this case:

import { Directive, ElementRef, OnDestroy } from \"@angular/core         


        

Answer 1

Working DEMO: https://plnkr.co/edit/ZYnlruYQ2HwrQpHZqV9O?p=preview

NOTE: In DEMO, I use blur event instead of ngDestroy. (which serve the same purpose). If you type anything in textbox, it will listen to keyup event but as you come out from textbox input , blur event happens and no further keyup will get fired.

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
   selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
      var button=el.nativeElement;
      button.addEventListener('keyup',this.error)
    }

    error(event){
      console.log(event);
        //whatsoever
      if(event.keyCode === 13){
          el.nativeElement.click();
      }
    }

    ngOnDestroy(){
        button.removeEventListener('keyup',this.error); 
    }    
}