Angular 2 HostListener keypress detect escape key?

Question

I am using the following method to detect keypresses on a page. My plan is to detect when the Escape key is pressed and run a method if so. For the moment I am just attempting to log which key is pressed. However the Escape key is never detected.

@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  console.log(event);
  let x = event.keyCode;
  if (x === 27) {
      console.log('Escape!');
  }
}

Sawant · Accepted Answer · 2018-09-25T09:42:44.480

207

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);
}

edited Sep 25 '18 at 09:42

answered Feb 20 '17 at 15:55

Sawant

4,321
1
27
30

1

Thanks bro. you made my day! – Shailesh Ladumor May 06 '17 at 10:38
To decide which one of the key events to use, check this SO answer: https://stackoverflow.com/a/46403258/3380547 – Sagar Sep 28 '17 at 11:59
2

How does the event specification work? `document:keydown.escape` seems rather arbitrary. Is there any documentation on the valid syntax? I could not even find a proper implementation in Angular of the HostListener directive functionality, the listeners seem to be buried deep in the internals. – Martin Nyolt Dec 18 '18 at 14:40
If this doesn't work, try 'window:keydown.espace' instead. – Egor Pavlikhin Dec 08 '20 at 09:13
`escape` should be `Escape` now – Udhayakumar May 10 '22 at 11:32

score 43 · Answer 2 · edited Jun 30 '17 at 07:03

43

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) {
    // ...
}

edited Jun 30 '17 at 07:03

piecioshka

4,752
2
20
29

answered Apr 23 '17 at 09:49

Gaurav Pandvia

805
7
13

4

Note that KeyCode is being [deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), you can replace with [event.key](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) and match against the string "Escape". No need to use codes, having the side effect of making the code easy to read. – Tony Mar 29 '18 at 09:18
1

Nice `document:keydown.escape` so we do not need to do that `27` check. Thanks. – LeOn - Han Li Jul 12 '18 at 22:30

Gibolt · Answer 3 · 2020-07-07T02:33:14.657

32

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
    }
}

edited Jul 07 '20 at 02:33

answered Dec 03 '17 at 01:11

Gibolt

42,564
15
187
127

2

Doesn't work in IE 11, where the key is called "Esc": if (event.key === "Escape" || event.key === "Esc") – akcasoy Jul 30 '18 at 16:25
2

Good catch! To be fair though, the title is 'Modern' :D – Gibolt Jul 30 '18 at 16:45
2

I was having problems consistently capturing char code 13 (enter key) when using a barcode scanner with an angular component. Changing from keypress to keydown resolved this for me. – James Blake Jul 12 '19 at 17:13

score 10 · Answer 4 · answered Aug 06 '20 at 15:05

10

In my case (with Angular 10) keydown.escape works fine to track event escape by console.log():

@HostListener('keydown.escape')
fn() {
 console.log();
}

But Angular change detector work fine only with keyup.escape.

answered Aug 06 '20 at 15:05

ktretyak

27,251
11
40
63

2

I needed to make this `@HostListener('document:keydown.escape')` for it to work, inspired by @Gibolt – hughjdavey May 29 '22 at 21:21

score 5 · Answer 5 · answered Aug 21 '19 at 05:01

Angular makes this easy with the @HostListener decorator. This is a function decorator that accepts an event name as an argument. When that event gets fired on the host element it calls the associated function.

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: 
    KeyboardEvent) {
    this.closeBlade();
   }

score 3 · Answer 6 · answered Feb 20 '17 at 16:01

3

keydown and keyup seem to work: http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

answered Feb 20 '17 at 16:01

Lucas Tétreault

953
5
15

Angular 2 HostListener keypress detect escape key?

6 Answers6

Modern approach, `event.key == "Escape"`

Linked

Angular 2 HostListener keypress detect escape key?

6 Answers6

Modern approach, event.key == "Escape"

Linked

Modern approach, `event.key == "Escape"`