DIY Keyboard Shortcuts In Angular App – hotkeys.js

Description:

A hotkey library for Angular that declaratively listens for shortcut events in your web applications.

Installation:

# NPM
$ npm install @ngneat/hotkeys --save

Import the library:

import { HotkeysModule } from '@ngneat/hotkeys';
@NgModule({
  imports: [HotkeysModule]
})
export class AppModule {}

Use this library as a directive

<input hotkeys="meta.n" 
       hotkeysGroup="File" 
       hotkeysDescription="New Document" 
       (hotkey)="handleHotkey($event)"

Use this library as a service

import { HotkeysService } from '@ngneat/hotkeys';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private hotkeys: HotkeysService) {}
  ngOnInit() {
    this.hotkeys.addShortcut({ keys: 'meta.a' }).subscribe(e => console.log('Hotkey', e));
  }
}

Possible Options:

interface Options {
  // The group name
  group: string;
  // hotkey target element (defaults to `document`)
  element: HTMLElement;
  // The type of event (defaults to `keydown`)
  trigger: 'keydown' | 'keyup';
  // hotkey description
  description: string;
  // Included in the shortcut list to be display in the help dialog (defaults to `true`)
  showInHelpMenu: boolean;
  // Whether to prevent the default behavior of the event. (defaults to `true`)
  preventDefault: boolean;
}