How to check for spacebar key event via angular?

Question

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.

score 10 · Accepted Answer · edited Jan 28 '23 at 10:00

10

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.

edited Jan 28 '23 at 10:00

double-beep

5,031
17
33
41

answered Aug 02 '19 at 19:50

Naga Sai A

10,771
1
21
40

Ah! I ended up going with Ponyboy's solution (as I had to do that for other reasons as well) but great knowing WHY my code wasn't working! – DA. Aug 02 '19 at 20:02

score 3 · Answer 2 · edited Jan 28 '23 at 09:59

You could do this in the component instead of the HTML template:

import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'app-page-viewer',
    templateUrl: './page-viewer.component.html',
    styleUrls: ['./page-viewer.component.css']
})

export class PageViewerComponent implements OnInit, OnDestroy {
    @HostListener('document:keyup', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        switch (event.key) {
            case 'ArrowLeft':
                // trigger something from the left arrow
                break;
            case 'ArrowRight':
                // trigger something from the right arrow
        }
    }

    constructor(){}
}

This is pretty much what I ended up doing. Prior to this, I did notice (keydown.space) worked, though. Still curious as to why (keyup.space) does not, though. — DA., Aug 02 '19 at 20:01

score 2 · Answer 3 · answered May 18 '22 at 19:02

Even though this is an old question, this was the first Google result returned in my search. So I wanted to post an answer that might help others who find it.

The trick is using keydown so you can prevent the default action for the space key before it happens. If you use keyup, the default action will have already occurred.

You can use preventDefault in the HTML template or in the TypeScript. I prefer doing it in the HTML template because it easily allows you to only use preventDefault when you need it, in the keydown.space event listener.

Use preventDefault() in HTML template

HTML:

(keydown.space)="doSomething(); $event.preventDefault()"

Use preventDefault() in TypeScript

HTML:

(keydown.space)="doSomething($event)"

TS:

doSomething(event: Event): void {
  window.alert('You did something');
  event.preventDefault();
}

How to check for spacebar key event via angular?

3 Answers3

Linked