import { WrHotkey } from 'ngwr/hotkey';WrHotkey
Register keyboard shortcuts like mod+k, where mod is ⌘ on macOS and Ctrl elsewhere.
Installation
Import the class. This entry point has no stylesheet.
Usage
Unbind the handle bind() returns on destroy, or use [wrHotkey], which unbinds itself.
private readonly hotkeys = inject(WrHotkey);
constructor() {
const handle = this.hotkeys.bind('mod+k', () => this.openPalette());
inject(DestroyRef).onDestroy(() => handle.unbind());
}<button [wrHotkey]="'mod+k'" (wrHotkeyMatch)="openPalette()">Search</button>API
| Name | Description | Type | Default |
|---|---|---|---|
bind(spec, handler, options?) | Register a binding. Returns { unbind }. | (spec, handler, options?) => WrHotkeyHandle | — |
[wrHotkey] | Directive form: binds on init, re-binds on input change, unbinds on destroy. | WrHotkeySpec | — |
spec format | '+'-separated tokens. mod = Cmd on macOS, Ctrl elsewhere. | string | — |
WrHotkeyOptions | The third argument of bind(). | interface | — |
element | Listen on this element instead of document. It must hold focus, so add tabindex="0". | HTMLElement | document |
preventDefault | Call event.preventDefault() on a match. | boolean | true |
allowInInput | Fire while an input, a textarea or a contenteditable has focus. | boolean | false |
priority | Higher runs first; a handler calling event.preventDefault() stops the lower ones. | number | 0 |
[wrHotkey] inputs
Global unless scoped limits it to the host element.
| Name | Description | Type | Default |
|---|---|---|---|
wrHotkeyrequired | The chord to listen for — 'mod+k', 'shift+?', or the full spec object. mod resolves to ⌘ on macOS and Ctrl everywhere else. | WrHotkeySpec | — |
scoped | Scope the binding to the host element instead of document. | boolean | false |
allowInInput | Fire even when an input / textarea has focus. | boolean | false |
preventDefault | Suppress the default action when the binding fires. | boolean | true |
(wrHotkeyMatch) | Emits the original KeyboardEvent on match. | KeyboardEvent | — |
Dependencies
| Used by | Command Palette |
|---|
See also
Guide KeyboardBind shortcuts, show them as keycaps, and see which keys each component handles.Component WrKbdShow the shortcut.Util KEYSKeyboardEvent.key constants.Component Command PaletteA ⌘K search box that finds and runs your app's actions.Util hasModifierTrue when Ctrl, Cmd, Alt, Shift or Meta is held during a KeyboardEvent.