CngxKeyboardShortcut

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/keyboard/keyboard-shortcut.directive.ts

Import#

import { CngxKeyboardShortcut } from '@cngx/common/interactive'

Description#

Declarative keyboard shortcut handler.

Binds a keyboard shortcut to the host element without global event listeners in a service. Supports mod as a platform-aware modifier (Meta on macOS, Ctrl elsewhere).

Two scopes: 'global' (default) listens on document and ignores events from input elements; 'self' listens only on the host element.

Uses parseKeyCombo and matchesKeyCombo from @cngx/core/utils.

Global save shortcut

<button [cngxKeyboardShortcut]="'mod+s'" (shortcutTriggered)="save()">
  Save
</button>

Scoped escape handler

<div [cngxKeyboardShortcut]="'escape'" [shortcutScope]="'self'"
     (shortcutTriggered)="close()" tabindex="0">
  Press Escape to close
</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/keyboard-shortcut/global-shortcut https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/keyboard-shortcut/self-scoped-shortcut

Metadata#

Selector: [cngxKeyboardShortcut]
Export as: cngxKeyboardShortcut

Index#

Inputs

enabled scope shortcut

Outputs

shortcutTriggered

Inputs#

enabled#boolean

input()

Whether the shortcut is active.

default true

scope#"global" | "self"

input()

'global' listens on document; 'self' listens only on the host element.

default 'global', { alias: 'shortcutScope' }

shortcut#string

input()Required

Shortcut combo string, e.g. 'mod+s', 'ctrl+shift+k', 'escape'.

default { alias: 'cngxKeyboardShortcut' }

Outputs#

shortcutTriggered#KeyboardEvent

output()

Emitted when the shortcut fires.