Angular 2 HostListener keypress detect escape key?
Try it with a keydown or keyup event to capture the Esc key. In essence, you can replace document:keypress with document:keydown.escape:
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) { console.log(event);}
It worked for me using the following code:
const ESCAPE_KEYCODE = 27;@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) { if (event.keyCode === ESCAPE_KEYCODE) { // ... }}or in shorter way:
@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) { // ...}
Modern approach, event.key == "Escape"
The old alternatives (.keyCode and .which) are Deprecated.
@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) { if (event.key === "Escape") { // Do things }}