Is there a way to create a directive that captures mouse click events on an entire component?
I recently crafted an Angular directive specifically for capturing mouse clicks.
@Directive({
selector: '[interceptClick]'
})
export class InterceptClickDirective {
constructor() {}
@HostListener('click', ['$event'])
onClick($event: MouseEvent): void {
console.log('mouse clicked');
}
}
In an attempt to utilize the directive within a component, I implemented the following:
<my-component interceptClick></my-component>
Unfortunately, this approach did not yield the expected results.
On the other hand, when I tried something like:
<div>
<button interceptClick>my button</button>
</div>
The directive successfully captured clicks on the button.
How can I modify the directive to work effectively across the whole component?
For context, my Angular version is 13.