HostListener to analyse combination key press
Although the solution by Frank Modica works, using Angular's key event filtering and pseudo-events would be a more readable and cleaner solution:
@Directive({
selector: '[keyHandler]'
})
export class KeyHandlerDirective {
@HostListener('keydown.shift.tab', ['$event'])
onKeyDown(e) {
// optionally use preventDefault() if your combination
// triggers other events (moving focus in case of Shift+Tab)
// e.preventDefault();
console.log('shift and tab');
}
}
// in template:
<input type="text" keyHandler />
More examples of how pseudo-events work can be found here.
It works when I do this:
@Directive({
selector: '[test-directive]'
})
export class TestDirective {
@HostListener('keydown', ['$event']) onKeyDown(e) {
if (e.shiftKey && e.keyCode == 9) {
console.log('shift and tab');
}
}
}
<input type="text" test-directive />
Note that keyup
can be tricky because tab
may unfocus the element. So by the time keyup
fires, you may be on the next element, so keyup
may actually fire on that element. So it depends on what you need. But keydown
works for the current element.