Angular 16 and Ivy Compatible. Older versions might work but isn't officially tested.
npm install angular2-hotkeysv13.. - Angular 13 (most likely Angular 12)
v15.. - Angular 15
v16.. - Angular 16
To install this library, run:
``bash`
$ npm install angular2-hotkeys --save
`typescript`
import {HotkeyModule} from 'angular2-hotkeys';
Then, add HotkeyModule.forRoot() to your AppModule's import array
`typescript`
@NgModule({
imports : [CommonModule, HotkeyModule.forRoot(), ...],
})
export class AppModule {}
If you have any sub/feature modules that also use hotkeys, import the HotkeyModule (but NOT .forRoot())
`typescript`
@NgModule({
imports : [CommonModule, HotkeyModule, ...],
})
export class SharedModule {}
Then inject the service into your constructor and add a new hotkey
`typescript`
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 callbacktypescript`
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
To enable the cheat sheet, simply add to your top level component template.HotkeysService
The 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.
`typescript`
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.
1. You can now pass in custom options in HotkeyModule.forRoot(options: IHotkeyOptions).
`typescript`
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;
};
2. You can also customize the title of the cheat sheet component.
`html`
To generate all *
}.js, .js.map and .d.ts files:
`bash``
$ npm run tsc
MIT © Nick Richardson