Formatting & Display Guide

import { formatForDisplay } from '@tanstack/angular-hotkeys'

formatForDisplay('Mod+S')
formatForDisplay('Mod+Shift+Z')

import { formatWithLabels } from '@tanstack/angular-hotkeys'

formatWithLabels('Mod+S')
formatWithLabels('Mod+Shift+Z')

import { formatKeyForDebuggingDisplay } from '@tanstack/angular-hotkeys'

formatKeyForDebuggingDisplay('Meta')
formatKeyForDebuggingDisplay('Shift')

import { Component, input } from '@angular/core'
import { formatForDisplay } from '@tanstack/angular-hotkeys'

@Component({
  standalone: true,
  selector: 'app-shortcut-badge',
  template: `<kbd class="shortcut-badge">{{ formatForDisplay(hotkey()) }}</kbd>`,
})
export class ShortcutBadgeComponent {
  readonly hotkey = input.required<string>()
  readonly formatForDisplay = formatForDisplay
}

import { Component, input } from '@angular/core'
import { formatForDisplay, injectHotkey } from '@tanstack/angular-hotkeys'

@Component({
  standalone: true,
  selector: 'app-menu-item',
  template: `
    <div class="menu-item">
      <span>{{ label() }}</span>
      <span class="menu-shortcut">{{ formatForDisplay(hotkey()) }}</span>
    </div>
  `,
})
export class MenuItemComponent {
  readonly label = input.required<string>()
  readonly hotkey = input.required<string>()
  readonly onAction = input.required<() => void>()
  readonly formatForDisplay = formatForDisplay

  constructor() {
    injectHotkey(() => this.hotkey(), () => this.onAction()())
  }
}

import { validateHotkey } from '@tanstack/angular-hotkeys'

const result = validateHotkey('Alt+A')