HostListener to analyse combination key press

user_7212464 0
Viewed 33434

I am trying to trace when a user presses a Shift+Tab combination key using keyboard, but I am not able to fire that event 

@HostListener('keyup', ['$event'])
@HostListener('keydown', ['$event'])

onkeyup(event) {
  if (event.keyCode == 16 && event.keyCode == 9) {
    this.isShift = true;
    console.log("On Keyup " + event.keyCode);
  }
}

onkeydown(event) {
  console.log("On KeyDown" + event.keyCode);
}
angular typescript
2 Answers

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.

user_46401310
Related