Class AppComponent

examples/angular/injectHotkey/src/app/app.component.ts:14–310

  templateUrl: './app.component.html',
})
export class AppComponent {
  protected readonly lastHotkey = signal<Hotkey | null>(null)
  protected readonly saveCount = signal(0)
  protected readonly incrementCount = signal(0)
  protected readonly enabled = signal(true)
  protected readonly activeTab = signal(1)
  protected readonly navigationCount = signal(0)
  protected readonly functionKeyCount = signal(0)
  protected readonly multiModifierCount = signal(0)
  protected readonly editingKeyCount = signal(0)

  protected readonly modalOpen = signal(false)
  protected readonly editorContent = signal('')
  protected readonly sidebarShortcutCount = signal(0)
  protected readonly modalShortcutCount = signal(0)
  protected readonly editorShortcutCount = signal(0)

  private readonly sidebarRef =
    viewChild<ElementRef<HTMLDivElement>>('sidebarRef')
  private readonly modalRef = viewChild<ElementRef<HTMLDivElement>>('modalRef')
  private readonly editorRef =
    viewChild<ElementRef<HTMLTextAreaElement>>('editorRef')

  constructor() {
    injectHotkey('Mod+S', (_event, { hotkey }) => {
      this.lastHotkey.set(hotkey)
      this.saveCount.update((c) => c + 1)
    })

    injectHotkey(
      'Mod+K',
      (_event, { hotkey }) => {
        this.lastHotkey.set(hotkey)
        this.incrementCount.update((c) => c + 1)
      },
      { requireReset: true },
    )

    injectHotkey(
      'Mod+E',
      (_event, { hotkey }) => {
        this.lastHotkey.set(hotkey)
        alert('This hotkey can be toggled!')
      },
      () => ({ enabled: this.enabled() }),
    )

    injectHotkey('Mod+1', () => {
      this.lastHotkey.set('Mod+1')
      this.activeTab.set(1)
    })
    injectHotkey('Mod+2', () => {
      this.lastHotkey.set('Mod+2')
      this.activeTab.set(2)
    })
    injectHotkey('Mod+3', () => {
      this.lastHotkey.set('Mod+3')
      this.activeTab.set(3)