Talaviya Bhavdip

Talaviya Bhavdip

  • 635
  • 2.5k
  • 584k

Programmatically generated html code not working

Jun 1 2018 5:41 AM
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
  1. this.dtOptions = {    
  2.   searching: false,    
  3.   serverSide: true,    
  4.   processing: true,    
  5.   columns: [    
  6.     { data: "Class" },    
  7.     { data: "Locked" },    
  8.     { data: "IterationNumber" },    
  9.     {    
  10.       data: "FileID",    
  11.       render: (data, type, row, meta) => {    
  12.         return `<div class="ui compact menu">    
  13.               <div  class="actions ui pointing dropdown link item">    
  14.                   Actions...    
  15.                   <i class="dropdown icon"></i>    
  16.                   <div class="menu">    
  17.                       <a class="item" (click)="ClickMe()">click me</a>    
  18.                        
  19.                   </div>    
  20.               </div>    
  21.           </div>`;    
  22.       }    
  23.     }    
  24.   ],    
  25.   ajax: {    
  26.     contentType: "application/json",    
  27.     dataType: "json",    
  28.     url: "api/document/search",    
  29.     method: "POST",    
  30.     data: (d: any) => {    
  31.       d.filter = this.filter;    
  32.       return JSON.stringify(d);    
  33.     }    
  34.   }    
  35. };  
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. 

Answers (1)