Angular Compiler Strips Out Function from HTML at Run Time

Viewed 27

I had to build a complex html table in my .ts file and pass it to my HTML due to limitations in what I could do with an *ngFor loop. When I build the HTML I add a function to the <td>s.

chart = chart + '<td colspan="3"  (click)="showComment('+"'"+'test'+"'"+',0,'+"'"+'houses'+"'"+')"  class="tdtooltip ' + this.getClass(p[i].Houses_ViewModel[0].rating) + '">'

If I inspect the chart variable in the browser (console.log(chart)) at runtime it looks like this:

<td colspan="3"  (click)="showComment('test',0,'houses')"  class="tdtooltip measure_green">

However when I inspect what the Element looks like it is dropping the function:

<td colspan="3" class="tdtooltip measure_green">

How can I ensure that the function doesn't get dropped when it is passed to the html? I've copied the (click)="showComment('test',0,'houses')"and manually pasted it into another element on the html, to prove it works.

0 Answers
Related