Programmatically generated html code not working

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 `class="ui compact menu">
class="actions ui pointing dropdown link item">
Actions...
class="dropdown icon">
class="menu">
class="item" (click)="ClickMe()">click me

Angular binding will work only when you're rendering it in a normal way. If you're trying to inject a html then after injection you have to register the click event. You can register the click event like below, but make sure that you have assigned the id for that anchor tag.

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