'How to use keydown event inside <i> instead of button

<button class="fa fa-caret-down font-size-18px" style="border: none"
  #pop="bs-popover"
  [popover]="fil"
  placement="bottom right"
  [adaptivePosition]="true"
  [outsideClick]="true"
  (keydown)="keydownEvent($event,pop)">
</button>

In my angular application, I am using a button which will open a popover. But I want it to be a tag or something other than a button because the button will be activated when we press space or enter keys which I don't want. The code should be like this:

<i class="fa fa-caret-down font-size-18px" style="border: none"
  #pop="bs-popover"
  [popover]="fil"
  placement="bottom right"
  [adaptivePosition]="true"
  [outsideClick]="true"
  (keydown)="keydownEvent($event,pop)">
</i>

But this will not trigger the keydown event. What might be the reason for it what are the alternatives? Thanks

htmlangularangular12


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions