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

I would leverage @HostListener decorator to do that:

@Directive({
  selector: "[Enter]"
})
export class Enter {
  @HostListener('document:keyup', ['$event'])
  enter(event) {
    if (event.keyCode !== 13) return;
    this.el.nativeElement.click();
  }
  constructor(private el: ElementRef) { }
} 

The handler will be automatically removed in ngOnDestroy.

For other solutions see:

• How to listen for mousemove event on Document object in Angular