Angular 4 - handle two events at the same time

Question

I want to handle a click event + CTRL keypress event in the same function in my component.ts file, but I don't seem to find a solution anywhere. I've tried:

@HostListener("click")
    onDropdownItemClick( evt: keyboardEvent) {
        console.log(evt.keyCode);
    }

but it just returns "ERROR TypeError: Cannot read property 'keyCode' of undefined"

I've also tried this too:

@Component({
        selector: '....',
        templateUrl: '....',
        host: {
            '(window:keydown)': 'findKey($event)',
            '(window:mousedown)': 'findKey($event)'
        }
   });

findKey(event) {
         if(event.ctrlKey && event.which === 1){
               console.log("CTRL + mouse-click");
        }
    }

But it's not working either. Anyone have suggestions on how to catch both events at the same time?

Answer 1

The MouseEvent event provides a ctrlKey property that allows to read the state of the Ctrl key state when the click happened

@HostListener("click", ['$event'])
onDropdownItemClick( evt: MouseEvent) {
  console.log('clicked - with ctrl pressed:', evt.ctrlKey);
}

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/ctrlKey

Just store the status of the control key in a field and read it in the click event:

ctrlDown = false;

@HostListener('window:keydown.ctrl')
onCtrlDown() {this.ctrlDown = true; }

@HostListener('window:keydown.ctrl')
onCtrlUp() {this.ctrlDown = false; }

@HostListener("click")
onDropdownItemClick( evt: keyboardEvent) {
  console.log('clicked - with ctrl pressed:', this.ctrlDown);
}

If above doesn't work please try

@HostListener('window:keydown', ['$event'])
onCtrlDown(event) {this.ctrlDown = event.ctrlKey; }

@HostListener('window:keydown')
onCtrlUp() {this.ctrlDown = false; }