What is Angular2 way of creating global keyboard shortcuts (a.k.a. hotkeys)?

Question

What would be proper way of creating global keyboard shortcuts (a.k.a. hotkeys) in Angular2 application?

Let\'s say good starting point would be to get working: \"?

Answer 1

You can use a library I created called angular2-hotkeys

It lets you create hotkeys like this:

constructor(private _hotkeysService: HotkeysService) {
  this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent) => {
    console.log('Typed hotkey');
    return false; // Prevent bubbling
}));  }

Answer 2

A simple and elegant solution will look like as following:-

Create a global service, which will store the bindings of shortcuts with clickable elements. Note:- Use NgOnDestroy, for removing bindings on component is destroyed.

Now create a directive, which will take keycodes as input like this.

<button [angularHotKey]="[17,78]">New Document</button>
<!-- CTRL = 17 & n = 78 -->

Now in your root most component, listen keypresses and use them as indices for locating Elements in Global Service for HotKeys. Now on getting the reference do something like this.

I assume you have formatted recorded keycodes in this format = 1-23-32-... , dont forget to sort them in ascending/descending format, both while adding it to keypair array in service and while checking

if(this.keypair[combo].length)this.keypair[combo].click();

this.keypair[combo] contain reference of element on which angularHotKey directive was added.

Further Notes: 1.) In angularHotKey directive while adding new keypair and element/clickable reference please check if there don't exist pairing with same combo, if yes throw a exception, it will be helpful while debugging, and prevent you from doing silly mistakes, and in Angular 2 component class,in ngOnDestroy method define a logic of removing all shortcuts paired with it's child elements.

Visit http://keycode.info/ for getting keycodes for all types of keys present on your keyboard.

JavaScript multiple keys pressed at once A answer with every little detail about how to deal with combo key presses

Answer 3

You can use this syntax in your template

<div (window:keydown)="doSomething($event)">click me<div>

to call this method in your component

doSomething($event) {
  // read keyCode or other properties 
  // from event and execute a command
} 

To listen on the host component itself

@Component({
  selector: 'app-component',
  host: { '(window:keydown)': 'doSomething($event)' },
})
class AppComponent { 
  doSomething($event) {
    ...
  }
}

or by this equivalent syntax

@Component({
  selector: 'app-component',
})
class AppComponent { 
  @HostListener('window:keydown', ['$event'])
  doSomething($event) {
    ...
  }
}