0

I'm currently working on a Mean stack app and I'm building a reusable table component on my angular side. Currently with "hardcoded" tabes I do the usual that you see in tutorials to display a table.

<tr *ngFor="let car of cars">
   <td>{{ car.name }}</td>
   <td>{{ car.make }}</td>
</tr>

However in my reusable component, I generate this html into a variable called tdHTML. I'm trying to have tdHTML act the same as the td's from above however when I try the following

<tr *ngFor="let car of cars" [innerHTML]="this.tdHTML"></tr>

I do not get the expected output. Instead, my table will be populated with the actual text "{{ car.make }}" etc instead of the values binded to these variables.

How do I get the value associted with {{ car.make }} instead of the text using the above method?

P.S using Angular 2 incase that's relevant info. Also unsure if the title is descriptive enough.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
JNMN
  • 165
  • 9
  • You don't need to refer to "this" object, just use [innerHTML]="tdHTML", that should solve the issue – Ajanth Jun 05 '18 at 22:46
  • @Mr.Wolf should this work even though tdHTML is generated in my typescript file? Why do you not need the this just for future reference? – JNMN Jun 05 '18 at 22:50
  • "this" is implicit in the html, I don't think you need to specify like that, assuming tdHTML is defined something like tdHTML: string = ''; in component.ts file. If you still face issues, then you might have to check how tdHTML is defined – Ajanth Jun 05 '18 at 22:55
  • Are you trying to embed angular HTML, if so, you might want to seach `` topic – windmaomao Jun 05 '18 at 23:06
  • Possible duplicate of [Equivalent of $compile in Angular 2](https://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2) – Reactgular Jun 05 '18 at 23:14
  • Also take a look at: https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular/38888009#38888009 – Reactgular Jun 05 '18 at 23:15

0 Answers0