Keyboard navigation with arrow keys in Angular

Question

I am new to Angular.

I have one list with font-awesome symbols.

and currently I can navigate through those symbols using the tab button on my keyboard.

but I want to do the same symbol navigation through the arrow keys on the keyboard.

I have 2 symbols in one div tag like this

  <div class="my-container">
          <First symbol>
          <Second Symbol>
  </div>

How can I achieve it?

Thanks in advance!

Answer 1

Did you already try this:

@HostListener('window:keydown.ArrowLeft', ['$event']) onArrowLeft(ev: KeyboardEvent) {
  console.log('arrow left', ev);
}
@HostListener('window:keydown', ['$event']) onKeyDown(ev: KeyboardEvent) {
  console.log('keydown', ev);
}