# provideHotkeys

```ts
function provideHotkeys(options?): Provider;
```

Defined in: [hotkeys-provider.ts:231](https://github.com/TanStack/hotkeys/blob/main/packages/angular-hotkeys/src/hotkeys-provider.ts#L231)

Provides default options, app hotkeys, and the user's custom hotkeys to an
injector, such as the application or a component.

Provide it in a component to create a hotkey scope. A nested provider
inherits app hotkeys and merges default options. With `scope`, hotkeys
injected in the component and its children fire only while it exists and
is enabled; with `exclusive`, only they fire. The scope activates when the
first hotkey in it is injected.

## Parameters

### options?

[`ProvideHotkeysOptions`](../interfaces/ProvideHotkeysOptions.md) = `{}`

## Returns

`Provider`

## Examples

```ts
bootstrapApplication(App, {
  providers: [
    provideHotkeys({
      appHotkeys,
      customHotkeys: JSON.parse(localStorage.getItem('hotkeys') ?? '{}'),
      onCustomHotkeysChange: (custom) =>
        localStorage.setItem('hotkeys', JSON.stringify(custom)),
    }),
  ],
})
```

```ts
@Component({
  selector: 'app-edit-dialog',
  providers: [provideHotkeys({ scope: 'edit-dialog', exclusive: true })],
  template: `...`,
})
export class EditDialog {
  constructor() {
    injectHotkey('Escape', () => this.close())
  }
}
```

```ts
// A scope that follows the providing component's input.
@Component({
  selector: 'app-folder',
  providers: [
    provideHotkeys({
      scope: () => inject(Folder).name(),
      enabled: () => inject(Folder).current(),
    }),
  ],
  template: `...`,
})
export class Folder {
  readonly name = input.required<string>()
  readonly current = input(false)
}
```