Angular 16 and Ivy Compatible. Older versions might work but isn't officially tested.
v2.4.0 - Angular 11 (most likely lower Angular versions)
v13.. - Angular 13 (most likely Angular 12)
v15.. - Angular 15
v16.. - Angular 16
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
@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())
@NgModule({
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 https://craig.is/killing/mice
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 <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.
- 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;
};
- You can also customize the title of the cheat sheet component.
<hotkeys-cheatsheet title="Hotkeys Rock!"></hotkeys-cheatsheet>
<!-- Default: 'Keyboard Shortcuts:' -->
- Create unit and E2E tests
To generate all * }.js
, *.js.map
and *.d.ts
files:
$ npm run tsc
MIT © Nick Richardson