Listening for key events in angular

Question

I have table and I'd like to add a function that will be triggered by the down arrow and cause the next row to become selected. So I'd like a down arrow, anywhere, to trigger a function in the component. I'm not concerned with the selection I know how to do that in a function, that was just my particular use case. I was just wondering how I can run a function when the user uses down arrow anywhere on the component or page?

I see how to do it on an input but can I bind it to a page or component so that a key down near the table will trigger an event?

Answer 1

You will get the keyup event from the HostListener decorator. For every keyup event there is a keycode associate with the event. You can use that keycode to distinguish between the down arrow key press among all the key events for other keys.

export class AppComponent {
  @HostListener('window:keyup', ['$event'])
  keyEvent(event: KeyboardEvent) {
    if(event.keyCode == KEY_CODE.DOWN_ARROW){
      // Your row selection code
      console.log(event);
    }
  }
}

export enum KEY_CODE {
    UP_ARROW = 38,
    DOWN_ARROW = 40,
    RIGHT_ARROW = 39,
    LEFT_ARROW = 37
}

Use the above code in the component where you are displaying the table. I used AppComponent just to demonstrate