Need help with hotkeys?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

183 Stars 8 Forks MIT License 69 Commits 12 Opened issues


🤖 A declarative library for handling hotkeys in Angular applications

Services available


Need anything else?

Contributors list

Test MIT commitizen PRs styled with prettier All Contributors ngneat spectator

Shortcut like a pro!

A declarative library for handling hotkeys in Angular applications.

Web apps are getting closer and closer to be desktop-class applications. With this in mind, it makes sense to add hotkeys for those power users that are looking to navigate their favorite websites using hotkeys just as they do on their regular native apps. To help you have a better experience we developed Hotkeys.


  • ✅ Support Element Scope
  • ✅ Support Global Listeners
  • ✅ Platform Agnostic
  • ✅ Hotkeys Cheatsheet

Table of Contents


npm install @ngneat/hotkeys



in your
import { HotkeysModule } from '@ngneat/hotkeys';

@NgModule({ imports: [HotkeysModule] }) export class AppModule {}

Now you have two ways to start adding shortcuts to your application:

Hotkeys Directive

Hotkeys take care of transforming keys from macOS to Linux and Windows and vice-versa.

Additionally, the directive accepts three more

  • hotkeysGroup
    - define the group name.
  • hotkeysDescription
    - add a description.
  • hotkeysOptions
    - See Options

For example:

Hotkeys Service

This is a global service that can be injected anywhere:

import { HotkeysService } from '@ngneat/hotkeys';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  constructor(private hotkeys: HotkeysService) {}

  ngOnInit() {
    this.hotkeys.addShortcut({ keys: 'meta.a' }).subscribe(e => console.log('Hotkey', e));


There are additional properties we can provide:

interface Options {
  // The group name
  group: string;
  // hotkey target element (defaults to `document`)
  element: HTMLElement;
  // The type of event (defaults to `keydown`)
  trigger: 'keydown' | 'keyup';
  // Allow input, textarea and select as key event sources (defaults to []).
  // It can be 'INPUT', 'TEXTAREA' or 'SELECT'.
  allowIn: AllowInElement[];
  // hotkey description
  description: string;
  // Included in the shortcut list to be display in the help dialog (defaults to `true`)
  showInHelpMenu: boolean;
  // Whether to prevent the default behavior of the event. (defaults to `true`)
  preventDefault: boolean;


Listen to any registered hotkey. For example:

const unsubscribe = this.hotkeys.onShortcut((event, key, target) => console.log('callback', key));

// When you're done listening, unsubscribe unsubscribe();


Display a help dialog listing all visible hotkeys:

import { MatDialog } from '@angular/material/dialog';
import { HotkeysHelpComponent, HotkeysService } from '@ngneat/hotkeys';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements AfterViewInit { constructor(private hotkeys: HotkeysService, private dialog: MatDialog) {}

ngAfterViewInit() { this.hotkeys.registerHelpModal(() => { const ref =, { width: '500px' }); ref.componentInstance.dimiss.subscribe(() => ref.close()); }); } }

It accepts a second input that allows defining the hotkey that should open the dialog. The default shortcut is

Shift + ?
. Here's how
looks like:

You can also provide a custom component. To help you with that, the service exposes the



Remove previously registered shortcuts.

// Remove a single shortcut
// Remove several shortcuts
this.hotkeys.removeShortcuts(['meta.1', 'meta.2']);

Hotkeys Shortcut Pipe


formats the shortcuts when presenting them in a custom help screen:

The pipe accepts and additional parameter the way key combinations are separated. By default, the separator is

. In the following example, a
is used as separator.

Allowing hotkeys in form elements

By default, the library prevents hotkey callbacks from firing when their event originates from an

, or
element. To enable hotkeys in these elements, specify them in the
import { HotkeysService } from '@ngneat/hotkeys';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { constructor(private hotkeys: HotkeysService) {}

ngOnInit() { this.hotkeys .addShortcut({ keys: 'meta.a', allowIn: ['INPUT', 'SELECT', 'TEXTAREA'] }) .subscribe(e => console.log('Hotkey', e)); } }

It's possible to enable them in the template as well:

That's all for now! Make sure to check out the

inside the


Can I define duplicated hotkeys?

No. It's not possible to define a hotkey multiple times. Each hotkey has a description and a group, so it doesn't make sense assigning a hotkey to different actions.

Why am I not receiving any event?

If you've added a hotkey to a particular element of your DOM, make sure it's focusable. Otherwise, hotkeys cannot capture any keyboard event.

How to ...

Listening to the same shortcut in different places.

You can always use

. This method allows listening to all registered hotkeys without affecting the original definition.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Carlos Vilacha

💻 🖋 📖

Netanel Basal

📝 💻 📖 🤔

Álvaro Martínez

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.