Key Hold API Reference

injectKeyHold

Function: injectKeyHold()

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

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

HeldKey | () => HeldKey

Returns

Signal<boolean>

Signal that returns true if the key is currently held down

Examples

@Component({
  template: `{{ isShiftHeld() ? 'Shift is pressed!' : 'Press Shift' }}`,
})
export class ShiftIndicatorComponent {
  isShiftHeld = injectKeyHold('Shift')
}

@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')
}

@TannerLinsley on X.com

GitHub

YouTube

Nozzle.io - Keyword Rank Tracker

Ethos

Tenets