Search code examples
javascriptangularkeyup

How to check for spacebar key event via angular?


I have an angular template that uses this syntax within:

(click)="dosomething()"

that works fine. I now need to have that same event fire on return or spacebar. I added this for return:

(keyup.return)="dosomething()"

that also works fine.

Got to spacebar and I can't get that to work. I've tried both...

(keyup.space)="dosomething()"

...as well as...

(keyup.spacebar)="dosomething()"

...but neither is working. In both cases, pressing space just defaults to browser behavior and scrolls the page down a bit.

The keyup even seems to be the documented solution (at least as far as I've been able to find) so am stumped as to what I might be missing here.


Solution

  • To achieve expected result, use (keyup.Space) instead of (keyup.space) ('S' in upperCase):

    <input (keyup.Space)= "doSomething()">
    

    You can also see this working sample on StackBlitz for reference.