DIY Keyboard Shortcuts in Your Angular Application

So your new product manager’s request is to add keyboard shortcuts for common actions in the application, giving the users a fast and slick experience.

As a good developer, you don’t want to reinvent the wheel. The initial instinct tells you to google for something like “angular hotkeys” and find an existing library that will do the work for you.

But wait! Before you add a few extra kilobytes to your bundle and give your browser’s engine additional code to parse, let me show you how you can do it yourself by using a built-in Angular API.

Events Magic

There is a lesser-known API which provides us with the ability to combine multiple keys when registering a keyboard event through Angular APIs.

For example, here’s how we can define an event that’s triggered only when the user presses cmd and k at the same time:

We are not limited to two keys; we can combine as many as we like:

🦊 That’s Nice, However..

When we have one or two shortcuts in the application, we can make do with this functionality. Since we’ve got dozens in our real-world application, we’ll take it a step further.

We want to create an abstraction for the application shortcuts. We need this abstraction to serve as the repository for all the shortcut logic, enabling us to control and modify it from there, and display it to the user if needed.

Next, we’ll “observify” the current API, giving us the power of RxJS.

Let’s create the Hotkeys service:

We obtain a reference to the EventKeyManager provider via DI. This provider exposes the addEventListener() method, where we can register the required event.

Alternatively, we can also use the Renderer provider listen() method. However, since we can’t inject it in a service, we’ll need to create a new instance of it ourselves, something which I prefer to avoid.

If you’re unfamiliar with this provider, you can read one of my previous detailed article about this topic:

Lifting the Veil: Insights into Angular’s EventManagerPlugin

We create the addShortcut() method that receives the element ( which default to document ) and the key combo, and returns an observable that registers the event when we subscribe.

Now, we can use the service wherever we want:

The next thing we need to do is to open a modal where we show the available shortcuts to the users. We’ll do so by registering a new shortcut, shift + ?, that opens the modal, and provide the consumer with the option to pass a description for each shortcut:

We create a new hotkeys property, which is a Map where the key is the shortcut key combo, and the value is the description. Now we can pass this data into our modal and display it to our users:

Let’s see the HotkeysHelpComponent implementation:

We convert the data into an array, so we can iterate over it and elegantly display it in a table. In real life, don’t forget to take care of windows/mac different key handling.

Pressing cmd + ?

More improvements that can be made include creating a directive use along with the service, and showing the user the keyboard symbols. Here’s the list for your convenience:

Summary

We’ve learned how Angular can simplify our lives and provides us with a useful built-in functionality to create keyboard shortcuts for our application. In most cases, you can make do with this API. If you need more advanced functionality, you can use a third-party library.

🚀 In Case You Missed It

• Akita: State Management Tailored-Made for JS Applications
• Spectator: A Powerful Tool to Simplify Your Angular Tests
• Transloco: The Internationalization library Angular

Follow me on Medium or Twitter to read more about Angular, Akita and JS!

or in ng-run.