Here is a special directive that detects key strokes on any component:
import { Directive, HostListener } from '@angular/core';
@Directive({ selector: '[keyCatcher]' })
export class keyCatcher {
@HostListener('document:keydown', [ '$event' ])
onKeydownHandler(event: KeyboardEvent) {
alert(event.key);
}
}
The KeyCatcher directive is applied in the HTML part of a customized component.
How can I transfer the event.key to the component.ts by using the KeyCatcher?
Is it common practice to achieve this through a service?