Angular event and listener examples in a modal component

angular-modal.ts

export class ModalComponent {
  readonly escapeKeyCode = 27;
  @Output() modalClosed = new EventEmitter();

  @HostListener('document:click', ['$event']) onClickHandler(event) {
    if (this.checkBackgroundClass(event.target, 'transparent-background')) {
      this.close();
    }
  }

  @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.keyCode === this.escapeKeyCode) {
      this.close();
    }
  }

  close = () => this.modalClosed.emit(true);

  checkBackgroundClass = (element, className): boolean => element.classList && element.classList.contains(className);

}