Hostlistener does not respond to arrow keys

Question

I have an angular 2 component and in the middle of that I listen for keys:

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
      console.log(event);
  }

I'm not getting any notification of arrow keys, enter keys work, as do normal keys.

I've read in this post that I can add a window.event:

Angular2 Navigation using Arrow Keys That seems to be the only post on the subject.

Whilst I can use that solution (and admittedly I'm sure it would work), it doesn't seem very "angular" to me. Also what element should I put this on?

Why am I not getting notification of arrow keys? They are a keypress aren't they?

Answer 1

You'd need to use keydown for arrow keys.

@HostListener('document:keydown', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) {
      console.log(event);
  }

keypress event represents a character being typed, and arrows are not characters so they won't trigger keypress