injectKeyboardLayout

function injectKeyboardLayout(): Signal<KeyboardLayoutMap | null>;

Defined in: injectKeyboardLayout.ts:46

Angular inject-based API that returns a signal of the browser's keyboard layout, or null until it loads and in browsers that don't report one. The layout maps each physical code to the character it types, such as KeyQ to a on a French AZERTY keyboard. Only Chromium browsers report one.

The layout loads after the first component that uses this function renders, so server-rendered output hydrates unchanged. injectFormatForDisplay uses this function, so you only need it for labels you draw yourself. Call it in an injection context, such as a field initializer.

To never ask the browser for the layout, set keyboardLayout: false in provideHotkeys's defaultOptions. The signal then holds null.

Returns#

Signal<KeyboardLayoutMap | null>

Signal of the keyboard layout, or null

Example#

@Component({
  selector: 'app-move-keys',
  template: `<kbd>{{ label('KeyW') }}</kbd>`,
})
export class MoveKeys {
  layoutMap = injectKeyboardLayout()

  label(code: string) {
    return (this.layoutMap()?.get(code) ?? code).toUpperCase()
  }
}