Skip to content
TanStackHotkeys
Key hold & held keys API Reference

injectKeyHold

ts
function injectKeyHold(key): Signal<boolean>;

Defined in: injectKeyHold.ts:40

Angular inject-based API that returns a signal that is true when the given key is held.

Subscribes to the global KeyStateTracker and uses a computed to determine if the specified key is held.

Parameters

key

IndividualKey | (() => IndividualKey)

The key to check (e.g. 'Shift', 'Control', 'Space') - can be a getter function

Returns

Signal<boolean>

Signal that returns true if the key is currently held down

Examples

ts
@Component({
  template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,
})
export class ShiftIndicatorComponent {
  isShiftHeld = injectKeyHold('Shift')
}
ts
@Component({
  template: `
    <span [style.opacity]="ctrl() ? 1 : 0.3">Ctrl</span>
    <span [style.opacity]="shift() ? 1 : 0.3">Shift</span>
  `,
})
export class ModifierIndicatorsComponent {
  ctrl = injectKeyHold('Control')
  shift = injectKeyHold('Shift')
}
Edit on GitHub
injectHotkeyHint
HotkeyRecorder