# injectKeyboardLayout

<!-- DO NOT EDIT: this page is autogenerated from the type comments -->

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

Defined in: [injectKeyboardLayout.ts:46](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/injectKeyboardLayout.ts#L46)

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

```ts
@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()
  }
}
```