@ngrithms/hotkeys

Signal-first keyboard shortcuts for Angular — auto-cleaning directives, modal scopes, multi-key sequences, multi-combo bindings, and a searchable cheatsheet.

npm install @ngrithms/hotkeys

This page runs @ngrithms/hotkeys v0.1.0 live. Press ? right now to open the searchable cheatsheet — every binding declared below registers itself with the service on mount and unregisters on unmount, so the cheatsheet always reflects the current page.

Live bindings on this page

Press any of these. The button is just the registration site — you don’t need to click or focus it. Matching happens at the document level.

The cheatsheet at ? ships from the separate @ngrithms/hotkeys/cheatsheet entry point — opt-in, so apps that don’t need it pay nothing.

Recent triggers

Press any of the bindings above to see them recorded here.

Inside the library

HotkeysService.registered is a signal of every binding currently mounted. That’s how the cheatsheet stays in sync — no observers, no manual refresh.

Setup

provideHotkeys({
  // Defaults — explicit here for clarity.
  cheatsheetHotkey: '?',
  allowInInputs: false,
  sequenceTimeoutMs: 1000,
  preventDefault: true,
});

Currently registered

[]

Quick start

// src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHotkeys } from '@ngrithms/hotkeys';

export const appConfig: ApplicationConfig = {
  providers: [provideHotkeys()],
};

// In any component
import { Component } from '@angular/core';
import { HotkeyDirective } from '@ngrithms/hotkeys';

@Component({
  standalone: true,
  imports: [HotkeyDirective],
  template: `
    <button
      (ngrHotkey)="save()"
      hotkey="mod+s"
      hotkeyDescription="Save"
    >
      Save
    </button>
  `,
})
export class Toolbar {
  save() { /* ... */ }
}

// Optional: drop the cheatsheet at your app shell
import { HotkeyCheatsheetComponent } from '@ngrithms/hotkeys/cheatsheet';

@Component({
  imports: [HotkeyCheatsheetComponent],
  template: `
    <router-outlet />
    <ngr-hotkey-cheatsheet [searchable]="true" />
  `,
})
export class App {}

See the full README for scopes, sequence configuration, dev-mode conflict warnings, multi-combo bindings, and the cheatsheet entry point. The demo app (Features / Quick Start / API / Examples) is the full reference.