DIY Keyboard Shortcuts In Angular App – hotkeys.js

Author: ngneat
Official Page: Go to website
Publish Date: April 27, 2020
License: MIT


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


$ npm install @ngneat/hotkeys --save

Import the library:

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

Use this library as a directive

<input hotkeys="meta.n" 
       hotkeysDescription="New Document" 

Use this library as a service

import { HotkeysService } from '@ngneat/hotkeys';
  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;

You Might Be Interested In:

Add Comment