Angular 8：在鼠标单击事件后使用 HostListener 查找 DOM 元素

Question

How do I find the current DOM element anywhere in the page, after a mouse click? Currently trying to use HostListener in Angular 8.

@HostListener('click') onClick(){
    window.alert('Current DOM element is');
}

Answer 1

Set second parameter with $event.target

@HostListener('click', ['$event.target']) onClick(e){
  window.alert('Current DOM element is');
  console.log(e);
}

Answer 2

You can also use ElementRef

import { ElementRef } from '@angular/core';

constructor(private elementRef: ElementRef) {}

@HostListener('click') onClick(){
    console.log(this.elementRef.nativeElement);
}

Answer 3

Here is the link that explains that you can use a directive to detect a dom element and when it is present only then host listener should work.

Refer this: