Keydown event on button in Angular

Question

I'm trying to register some keybindings to buttons, so that for instance different things happen when pressing '->', '<-', and '1'. I'm new to these keybindings, but I cannot figure out how to make them work, nothing happens when I press the buttons. I tried searching for requirements for the elements to add keybindings to, but I could not find any (except for adding tabindex="0" on divs, tried adding these to the buttons as well, but it did not change anything). I read this nice explanation: https://www.digitalocean.com/community/tutorials/angular-binding-keyup-keydown-events. The examples only add keybindings to inputs, so I also tried changing the button to an input with type="button", but that did not change anything.

I also experimented with a hostlistener with keydown events, but that is not what I need, as I need specific data from the form when pressing the keys.

I have the following angular component (simplified for example):

<ng-container *ngIf="this.data | async as data">
  <form>
    <span>
      <button (click)="back()" (keydown.1)="onOne($event, data.someProperty)">1</button>
    </span>
    <span>
      <button (click)="back()" (keydown.arrowLeft)="onArrowLeft($event)">back</button>
    </span>
    <span>
      <button (click)=next()" (keydown.arrowRight)="onArrowRight($event, data.someProperty)">next</button>
    <span>
  </form>
</ng-container

and the respective ts code:

onArrowLeft(event) {
  console.log('left!');
}

onArrowRight(event, someProperty) {
  console.log('right', someProperty);
}

onOne(event, someProperty) {
  console.log('1', someProperty);
}

It does not return errors, it just doesn't show anything in the console. Is it possible to add such keypress events to buttons? If so, what am I missing?