angular.js中如何给动态创建的锚标签添加点击事件？

Question

My requirement is to first convert a part of plain text to a link and then attach a click handler to it. On click of that link, a popup should open with some details to show.

To convert that normal string to a link, I've used below code, but I'm unable to attach a click event listener to it.

   const arrayLabel = text.split('$');
   let stylizedText = arrayLabel[0];
   stylizedText += `<a id="anchorId" style="text-decoration: none;" href="javascript:void(0)">${arrayLabel[1]}</a> `;
   stylizedText += arrayLabel[2];
   return stylizedText;

I tried to add (click)="myMethod" and document.getElementById('anchorId").addEventListener('click','myMethod') ,but both approaches failed. Can anyone please help here?

Answer 1

I figured out the solution for this using ngAfterViewInit in angular.

  public ngAfterViewInit() {
    const anchor = this.elementRef.nativeElement.querySelector('#anchorId');
    if (anchor) {
      anchor.addEventListener('click', () => {
           // Do your task
      });
    }
  }