https://github.com/brtnshrdr/angular2-hotkeys
Keyboard shortcuts for Angular 2 apps
https://github.com/brtnshrdr/angular2-hotkeys
angular angular2 hotkeys typescript
Last synced: 7 months ago
JSON representation
Keyboard shortcuts for Angular 2 apps
- Host: GitHub
- URL: https://github.com/brtnshrdr/angular2-hotkeys
- Owner: brtnshrdr
- License: mit
- Created: 2016-05-27T17:28:01.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-01-15T15:55:32.000Z (almost 2 years ago)
- Last Synced: 2025-04-08T14:44:52.837Z (7 months ago)
- Topics: angular, angular2, hotkeys, typescript
- Language: TypeScript
- Size: 531 KB
- Stars: 204
- Watchers: 19
- Forks: 94
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - brtnshrdr/angular2-hotkeys - Keyboard shortcuts for Angular 2 apps (Services / Other)
- awesome-angular - angular2-hotkeys - Keyboard shortcuts for Angular 2 apps. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular2-hotkeys - Keyboard shortcuts for Angular 2 apps. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular2-hotkeys - Keyboard shortcuts for Angular 2 apps. (Table of contents / Third Party Components)
README
# angular2-hotkeys
Angular 16 and Ivy Compatible. Older versions might work but isn't officially tested.
## Versions compatibility
v2.4.0 - Angular 11 (most likely lower Angular versions)
v13.*.* - Angular 13 (most likely Angular 12)
v15.*.* - Angular 15
v16.*.* - Angular 16
## Installation
To install this library, run:
```bash
$ npm install angular2-hotkeys --save
```
## Examples
First, import the HotkeyModule into your root AppModule
```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 callback
```typescript
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](https://github.com/chieffancypants/angular-hotkeys)
## Cheat Sheet
To enable the cheat sheet, simply add `` 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.
```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.
### Cheat Sheet Customization
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
```
## TODO
1. Create unit and E2E tests
## Development
To generate all `*
}.js`, `*.js.map` and `*.d.ts` files:
```bash
$ npm run tsc
```
## License
MIT © [Nick Richardson](nick.richardson@mediapixeldesign.com)