TypeScript icon, indicating that this package has built-in type declarations

2.2.0-1 • Public • Published


Angular 9 and Ivy Compatible. Older versions might work but isn't officially tested.


To install this library, run:

$ npm install angular2-hotkeys --save


First, import the HotkeyModule into your root AppModule

import {HotkeyModule} from 'angular2-hotkeys';

Then, add HotkeyModule.forRoot() to your AppModule's import array

    imports : [CommonModule, HotkeyModule.forRoot(), ...],
export class AppModule {}

If you have any sub/feature modules that also use hotkeys, import the HotkeyModule (but NOT .forRoot())

    imports : [CommonModule, HotkeyModule, ...],
export class SharedModule {}

Then inject the service into your constructor and add a new hotkey

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

It also handles passing an array of hotkey combinations for a single callback

this._hotkeysService.add(new Hotkey(['meta+shift+g', 'alt+shift+s'], (event: KeyboardEvent, combo: string): ExtendedKeyboardEvent => {
    console.log('Combo: ' + combo); // 'Combo: meta+shift+g' or 'Combo: alt+shift+s'
    let e: ExtendedKeyboardEvent = event;
    e.returnValue = false; // Prevent bubbling
    return e;

Your callback must return either a boolean or an "ExtendedKeyboardEvent".

For more information on what hotkeys can be used, check out

This library is a work in progress and any issues/pull-requests are welcomed! Based off of the angular-hotkeys library

Cheat Sheet

To enable the cheat sheet, simply add <hotkeys-cheatsheet></hotkeys-cheatsheet> to your top level component template. The HotkeysService will automatically register the ? key combo to toggle the cheat sheet.

NB! Only hotkeys that have a description will apear on the cheat sheet. The Hotkey constructor takes a description as an optional fourth parameter as a string or optionally as a function for dynamic descriptions.

this._hotkeysService.add(new Hotkey('meta+shift+g', (event: KeyboardEvent): boolean => {
    console.log('Secret message');
    return false;
}, undefined, 'Send a secret message to the console.'));

The third parameter, given as undefined, can be used to allow the Hotkey to fire in INPUT, SELECT or TEXTAREA tags.

Cheat Sheet Customization

  1. You can now pass in custom options in HotkeyModule.forRoot(options: IHotkeyOptions).
export interface IHotkeyOptions {
   * Disable the cheat sheet popover dialog? Default: false
  disableCheatSheet?: boolean;
   * Key combination to trigger the cheat sheet. Default: '?'
  cheatSheetHotkey?: string;
   * Use also ESC for closing the cheat sheet. Default: false
  cheatSheetCloseEsc?: boolean;
   * Description for the ESC key for closing the cheat sheet (if enabed). Default: 'Hide this help menu'
  cheatSheetCloseEscDescription?: string;
   * Description for the cheat sheet hot key in the cheat sheet. Default: 'Show / hide this help menu'
  cheatSheetDescription?: string;
  1. You can also customize the title of the cheat sheet component.
<hotkeys-cheatsheet title="Hotkeys Rock!"></hotkeys-cheatsheet>
<!-- Default: 'Keyboard Shortcuts:' -->


  1. Create unit and E2E tests


To generate all * }.js, * and *.d.ts files:

$ npm run tsc


MIT © Nick Richardson

Package Sidebar


npm i angular2-hotkeys-lw

Weekly Downloads






Unpacked Size

237 kB

Total Files


Last publish


  • aleksandr-erin
  • konstantin_milovanov_dsr