A declarative library for handling keyboard shortcuts in Angular applications.
@ngneat/hotkeys is a declarative library for handling keyboard shortcuts in Angular applications. It allows developers to easily add hotkey support to improve navigation and interaction for power users, making web apps feel more like native desktop applications. The library provides both a directive for template-driven shortcuts and a service for programmatic control.
Angular developers building feature-rich web applications where keyboard navigation and shortcuts can enhance user productivity and experience.
Developers choose @ngneat/hotkeys for its clean, declarative API that integrates seamlessly with Angular, platform-agnostic key handling, and built-in features like a help modal and sequence shortcuts, reducing the boilerplate needed to implement robust hotkey support.
🤖 A declarative library for handling hotkeys in Angular applications
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows defining hotkeys directly in Angular templates using the hotkeys directive, making it intuitive and aligning with Angular's template-driven patterns for easy adoption.
Automatically transforms key combinations like 'meta' to 'Ctrl' or 'Cmd' based on the user's OS, eliminating the need for manual platform-specific code adjustments.
Provides a customizable cheatsheet modal that lists all registered shortcuts, enhancing user discoverability with a default Shift+? shortcut and easy integration.
Enables definition of multi-key sequences (e.g., 'g>i'), allowing for complex, desktop-like shortcut patterns that improve power user navigation.
Prevents registering the same hotkey for different actions, returning an EMPTY observable, which can be restrictive for applications needing contextual shortcut reuse.
Hotkeys scoped to elements only work if those elements are focusable, as noted in the FAQ, requiring additional attributes or JavaScript for non-interactive elements.
The built-in help modal example relies on third-party libraries like @ng-bootstrap/ng-bootstrap, adding setup complexity for teams not using these UI kits.