String interpolation inside innerHTML in angular 2

Question

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.

Possible duplicate of Angular2 - Interpolate string with html — Pardeep Jain
– Pardeep Jain, Commented Mar 14, 2017 at 8:04
Sorry. but i am looking for a way to read the value of a string interpolation inside the innerHtml — Jiann4321
– Jiann4321, Commented Mar 14, 2017 at 8:05

Günter Zöchbauer · Accepted Answer · 2017-03-14 08:04:52Z

1

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

public data: any = `<a>${stringInterpolation}</a>`;

answered Mar 14, 2017 at 8:04

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Günter Zöchbauer Over a year ago

You should be aware that this only binds a single time when data is initialized in contrary to {{}} which updates every time stringInterpolation changes.

Kapil Soni Over a year ago

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}"?

Community · Accepted Answer · 2017-05-23 10:31:06Z

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?

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Mar 14, 2017 at 8:15

Serginho

7,5303 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

String interpolation inside innerHTML in angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related