0

How can I render an expression inside an [innerHTML] directive:

public stringInterpolation: string = 'title';
public data: any = '<a>{{stringInterpolation}}</a>';

<div [innerHTML]="data"></div>

String interpolation is being rendered as text not the exact value.

Logic behind this is I am using a reusable table and I want a configuration where in I can specify a template that will be generated inside a cell rather than listing all data as text.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Jiann4321
  • 21
  • 1
  • 4
  • 4
    Possible duplicate of [Angular2 - Interpolate string with html](http://stackoverflow.com/questions/38279071/angular2-interpolate-string-with-html) – Pardeep Jain Mar 14 '17 at 08:04
  • Sorry. but i am looking for a way to read the value of a string interpolation inside the innerHtml – Jiann4321 Mar 14 '17 at 08:05

2 Answers2

1

You can use TypeScript interpolation. Angular bindings aren't supported in dynamically added HTML:

public data: any = `<a>${stringInterpolation}</a>`;
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • You should be aware that this only binds a single time when `data` is initialized in contrary to `{{}}` which updates every time `stringInterpolation` changes. – Günter Zöchbauer Mar 14 '17 at 08:08
  • sir can you tell mw how to iterate array with TypeScript interpolation?.actually i have an array like this---*ngFor="let item of ${salesOrderModel.SalesOrderItemList}"? – Kapil Soni Apr 18 '22 at 04:26
0

You can't do this, if you have to inject different templates inside an html tag. You have to create one component for each template you need, and load components dynamically.

To load component at runtime, see this: How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

Community
  • 1
  • 1
Serginho
  • 7,291
  • 2
  • 27
  • 52