angular call function from append html

how i can call a function in angular with inner html

i tried:

  cellTemplateFunc(cellElement, cellInfo){
    var subContainer = document.createElement('div');
    subContainer.innerHTML = "<a href='javascript:void(0);' (click)='openPopup();'>"+ cellInfo.data.documentNum + "</a>"
    cellElement.append(subContainer);     
   } 
  
   openPopup(){  
    console.log("openPopup clicked");

    this.popupVisible = true;

    }

but the function not called

https://stackblitz.com/edit/angular-ivxkja?file=app/app.component.ts

you cannot call a function with innerHtml.

You have to do it like this:

  <dxi-column dataField="BirthDate" cellTemplate="cellTemplate"></dxi-column>
  <div *dxTemplate="let cell of 'cellTemplate'">
    <a (click)="openPopup()"> {{ cell.data.FirstName }} </a>
  </div>

it's also cleaner and simpler