How to check for spacebar key event via angular?

Issue

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()">

working code sample for reference- https://stackblitz.com/edit/angular-dmvr52?file=src/app/app.component.html

Answered By – Naga Sai A

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.