[Angular] Angular Global Keyboard Handling With EventManager

If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'.

 

Now we have a modal component, we want to click 'Esc' key to close the modal.

  <au-modal
    class="auth-modal"
    *auModalOpenOnClick="[loginButton, signUpButton]"
    [closeOnClickOutside]="true"
    [closeOnEsc]="true"
    [body]="newModelBody">
    <!-- Modal body -->
  </au-modal>

 

We set two input variables: 'closeOnEsc' for keyboard event. And 'closeOnClickOutside' to click event.

import {Component, Input, OnInit, TemplateRef} from '@angular/core';
import {AuModalService} from './au-modal.service';
import {EventManager} from '@angular/platform-browser';

@Component({
  selector: 'au-modal',
  templateUrl: './au-modal.component.html',
  styleUrls: ['./au-modal.component.scss']
})
export class AuModalComponent implements OnInit {

  @Input() body: TemplateRef<any>;
  @Input() closeOnClickOutside = true;
  @Input() closeOnEsc = true;

  constructor(private auModelService: AuModalService,
              private eventManage: EventManager) {
  }

  ngOnInit() {
    this.eventManage.addGlobalEventListener('window', 'keyup.esc', () => {
      if (this.closeOnEsc) {
        this.closeModal();
      }
    })
  }

  onClick() {
    if (this.closeOnClickOutside) {
      this.closeModal();
    }
  }

  closeModal() {
    this.auModelService.close();
  }

  cancelCloseModal(evt: KeyboardEvent) {
    evt.preventDefault();
    evt.stopPropagation();
  }

}