Migrating angular-hotkeys to modern Angular
angular-hotkeys registered keyboard shortcuts through a hotkeys service on top of Mousetrap, bound them to scopes or routes and showed a cheat sheet when the user pressed the question mark key. It is tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| Angular key event bindings | Bindings such as (keydown.control.s) or (document:keydown.escape) cover shortcuts that belong to one component. |
| Your own shortcut service | A registry of global shortcuts with descriptions, which can also feed a help dialog like the old cheat sheet. |
| tinykeys | A very small framework-agnostic library that supports key sequences; wrap it in a service. |
How to migrate it
- Export the list of shortcuts with their descriptions; the cheat sheet already has it.
- Use template or host key bindings for shortcuts that belong to one component.
- Put global shortcuts in one service that registers and unregisters them with the route or component lifecycle.
Watch out. Mousetrap ignored shortcuts while the user typed in inputs, selects and textareas. Your replacement must do the same, or single-key shortcuts will fire in the middle of a form.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn