I have a boolean variable which is by default false. So now, I want the variable to bee '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?

I have a boolean variable which is by default false. So now, I want the variable to bee '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?

• javascript
• angular
• typescript

2 Answers 2

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

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

I would use @HostListener decorator within your ponent:

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.