jeudi 27 mai 2021

How to avoid hardcoded @HostListener events in Angular 11?

Context

After implementing HostListeners for a certain keyboard event in my Angular application I ran into the problem that some users might not have conveniently placed keys. As an example the English QWERTY keyboard has its "/" next to the right shift button. On the other hand, the German "QWERTZU" keyboard has its "/" in the numbers row, next to the "`" and it requires two modifier keys in order to perform. The goal was to improve usability by allowing certain keyboard shortcuts, but in this case for the German keyboard, it does the opposite.

Goal

My goal is to specify certain hotkey combinations in a specific application configuration class. This should not be too difficult to perform. The users can then configure their hotkeys themselves.

Problem

At the moment my implementation for a certain hotkey looks like this.

@HostListener('window.keydown.esc') escapeEvent(): void {
...
}

As you can see the @HostListener annotation requires an argument in order to listen for a certain event. The downside of this, is that it cannot be set statically. I can for instance not define a variable and insert it into this parameter. The error I would get is the following

@HostListener's event name argument must be a string. Value could not be determined statically

How can I avoid this, in order to configure these hotkeys in a settings file and improve user experience and usability?

Thanks beforehand!

Aucun commentaire:

Enregistrer un commentaire