provideHotkeys | TanStack Hotkeys Angular Docs

function provideHotkeys(options?): Provider;

function provideHotkeys(options?): Provider;

Defined in: hotkeys-provider.ts:231

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 = {}

Returns

Provider

Examples

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

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

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

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

// 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)
}

// 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)
}