Suppouse we have this template:
<div class="myClass" (click)="doSomething($event)">
soSomething is not called on a middle click. How can I solve this problem?
I solved this problem by using a small custom middleclick
directive which is listening to the mouseup
event because in my example (on macOS) the click
HostListener is not fired on a middle click.
import { Directive, Output, EventEmitter, HostListener } from '@angular/core';
@Directive({ selector: '[middleclick]' })
export class MiddleclickDirective {
@Output('middleclick') middleclick = new EventEmitter();
constructor() {}
@HostListener('mouseup', ['$event'])
middleclickEvent(event) {
if (event.which === 2) {
this.middleclick.emit(event);
}
}
}
With this you can use something like
<button (middleclick)="doSomething()">Do something</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With