How can I detect when a key is pressed or released in Angular 'without input'?

Question

I have a boolean variable which is by default false. So now, I want the variable to become 'true' when a key is pressed and 'false' the key is released.

Example: When I press the shift key, the declared variable should return true and when I released it, the variable should return false.

I know Angular JS has two keyboard events (keydown and Keyup) but as long as I know, in most cases, they're only used with 'input' fields. So is there an alternative to utilize the methods without an input field?

Milo · Accepted Answer · 2019-10-07 12:40:22Z

4

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
   console.log(event);
}

edited Oct 7, 2019 at 12:40

Milo

3,4539 gold badges32 silver badges44 bronze badges

answered Oct 7, 2019 at 12:06

Samet Karaca

1036 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I would use @HostListener decorator within your component:

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

@Component({
  ...
})

export class AppComponent {

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent(event: KeyboardEvent) { 
    this.key = event.key;
  }
}

Put your conditions inside that block & you'll be gtg. There exists other ways too just so you know.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 7, 2019 at 12:05

Sawant Sharma

7583 silver badges11 bronze badges

Collectives™ on Stack Overflow

How can I detect when a key is pressed or released in Angular 'without input'?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related