Programmatically generated html code not working

Question

My problem is when I need to "render" a datatable column with custom HTML the angular binding seems to be lost.

 

Basically Datatable gives a (render) Callback so you can inject HTML in the column.

 

For my case one of my columns is a dropdown with Actions button.

 

Here is my Datatable options:

 

Take a closer look at the 4th column

this.dtOptions = {
  searching: false,
  serverSide: true,
  processing: true,
  columns: [
    { data: "Class" },
    { data: "Locked" },
    { data: "IterationNumber" },
    {
      data: "FileID",
      render: (data, type, row, meta) => {
        return `<div class="ui compact menu">
              <div  class="actions ui pointing dropdown link item">
                  Actions...
                  <i class="dropdown icon"></i>
                  <div class="menu">
                      <a class="item" (click)="ClickMe()">click me</a>

                  </div>
              </div>
          </div>`;
      }
    }
  ],
  ajax: {
    contentType: "application/json",
    dataType: "json",
    url: "api/document/search",
    method: "POST",
    data: (d: any) => {
      d.filter = this.filter;
      return JSON.stringify(d);
    }
  }
};

The semantic dropdown is rendered but the angular (click) binding is not working.

 

I've tried to use an Angular Dynamic Component with no success.

 

Is there a way to reapply the angular binding?

 

Note: the same HTML place directly in the component is working.