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

Arutselvan Muthukannu · Answer

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 `; } } ], ajax: { contentType: "application/json" , dataType: "json" , url: "api/document/search" , method: "POST" , data: (d: any) => { d.filter = this .filter; return JSON.stringify(d); } } }; //after the successful completion of column rendering execute the below part. document.getElementById( "clickable" ).addEventListener( "click" , function () { alert( "click" ); });