如何将点击事件附加到 Angular 7+ 中的插件添加到 DOM 的元素？

Question

I'm using the VMWareClarity module to add a datagrid to a page. As part of this datagrid, there's a button to open a popup over the grid to select which columns to hide/show. Once the columns are selected, the popup can be closed by clicking the close button.

I need to attach an action to the close button in the popup, but I haven't been able to access the element to click it as it's only rendered in the DOM once I click the Hide/Show columns button. I've tried adding an elementRef.nativeElement.querySelector in ngAfterViewInit , changeDetection , and @HostListener but none are able to find the new popup element loaded into the DOM.

Answer 1

Have you checked your parent nodes for your target element? Usually a Pop-up (depends on your UI framework) is created on the hightest DOM Level in the Body Tag. Otherwise you still can implement an Output() EventEmitter like shown here: https://ultimatecourses.com/blog/component-events-event-emitter-output-angular-2

Example code for the outputting component:

@Output() change = new EventEmitter<number>();

Answer 2

In this case I was able to use a HostListener on the document, then track if the event target nodeName was the element I was looking for (as every element has a nodeName ):

@HostListener('document:click', ['$event'])
onClick(event) {
    if (event.target.nodeName === 'CLR-ICON') {
      // Do something
    }
  }