Handling Global Keyboard Shortcuts Using Priority And Terminality In Angular 5.0.5
- Within your Component meta-data, all you have to do is add an event binding to one of the global event targets (“document” or “window”): – – This is perfect for simple applications that don’t have many global key-bindings.
- I think that this was a step in the right direction; but, it also fell short because it couldn’t see global keyboard shortcuts in a holistic light: it could only see and react to one key-event binding at a time.
- As such, I think the best long-term solution is to move global key-event binding configuration out of the “host” meta-data and into an explicit service that understands and facilitates keyboard shortcuts as a first-class concept within an application’s architecture.
- In the AppComponent, you can use the Command+F key-combination to open the ChildComponent; and, you can use the Escape key-combination to close the ChildComponent: – – As you can see, this component’s keyboard shortcuts are listening at “priority: 0”.
- When the ChildComponent catches the global key-event, the AppComponent doesn’t see it because the key-event is allowed to propagate down to a lower-priority listener.
Ben Nadel shares his approach for implementing keyboard shortcuts in Angular 5.0.5, using a KeyboardShortcuts service that requires explicit priorities and event-propagation rules. This explicit configuration brings clarity and a holistic view to global key-events, promoting them to a first-class concept within the application architecture.
@amcdnl: Global keyboard handlers in #angular –
Consuming global keyboard shortcuts in an Angular application (or any application for that matter) is a non-trivial task. Global key-event handlers often run into collision errors, unbind errors, and timing errors that can make debugging a nightmare. And while Angular provides easy semantics for binding to the Document and Window key-events, there’s no native construct for effectively managing these events across complex and deeply-nested applications. As such, I wanted to revisit this challenge and look at a potential solution that uses explicit event-handler priorities and terminal configurations.
Out of the box, Angular comes with easy semantics for binding to global key events. Within your Component meta-data, all you have to do is add an event binding to one of the global event targets (“document” or “window”):
This is perfect for simple applications that don’t have many global key-bindings. As your applications get more complex, however, this approach starts to fall down. In the past, I’ve trying to increase the feasibility of this approach by creating a custom key-event plugin that adds additional “priority” and “terminal” settings:
Here, we are using the “@” to define the priority at which a key-handler will run. This way, if two different views are listening to the same global key-event, the “winning” event-handler becomes the one with the higher priority; it no longer depends on the coincidental structure of the component tree.
I think that…