Sharing Top Content from the Angular-sphere.

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.

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.

Run this demo in my JavaScript Demos project on GitHub.

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…

Handling Global Keyboard Shortcuts Using Priority And Terminality In Angular 5.0.5

Comments are closed, but trackbacks and pingbacks are open.