Service

WrHotkey

Global keybinding registry. Specs like mod+kmod auto-resolves to Cmd on macOS / Ctrl elsewhere. Skips bindings while an input / textarea has focus by default. [wrHotkey] is the declarative form of the same registry — also global unless you pass [scoped]="true" to limit it to the host element.

Usage

private readonly hotkeys = inject(WrHotkey);

ngOnInit() {
  const handle = this.hotkeys.bind('mod+k', () => this.openPalette(), {
    preventDefault: true,
    allowInInput: false,
  });
  this.destroyRef.onDestroy(() => handle.unbind());
}

// Or use the directive form:
// <button [wrHotkey]="'mod+k'" (wrHotkeyMatch)="openPalette()">…</button>
Press / (or Ctrl/) anywhere on this page.

Why ngwr provides this

Raw keydown listeners need platform-aware modifier mapping (⌘ vs Ctrl), input-field exclusion, and teardown. WrHotkey registers a declarative combo and cleans up with the host's DestroyRef.

API

NameDescriptionTypeDefault
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

[wrHotkey] inputs

The directive form, bound on the element that owns the shortcut.

NameDescriptionTypeDefault
wrHotkeyrequiredWrHotkeySpec
scopedScope the binding to the host element instead of document.booleanfalse
allowInInputFire even when an input / textarea has focus.booleanfalse
preventDefaultSuppress the default action when the binding fires.booleantrue
(wrHotkeyMatch)Emits the original KeyboardEvent on match.KeyboardEvent

See also