Angular2 html binding (html contain variable)

Question

I have theHtmlString variable and bind as follow is correct:

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

But theHtmlString variable has contain some orther variable:

theHtmlString = "<input [(ngModel)]='value'/>";

How bind HTML for it?

what @GunterZochbauer said, and as a result, you'll need to use DynamicComponentLoader to implement this. — drew moore
– drew moore, Commented Apr 18, 2016 at 10:38

Günter Zöchbauer · Accepted Answer · 2016-04-18 10:31:08Z

3

Angular doesn't process HTML added this way. It doesn't resolve bindings nor instantiate components or directives. It's passed to the browser as-is.

answered Apr 18, 2016 at 10:31

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

Emilio Weba Over a year ago

So is it impossible to accomplish this?

Günter Zöchbauer Over a year ago

I wouldn't say impossible, but not plain simple either ;-). You can create a component at runtime like explained in stackoverflow.com/questions/34784778/… and add this component instead. There is a ready-to-use library that makes it easier to dynamically create components (don't remember the name). Currently this is not compatible with AoT though.

Thierry Templier · Accepted Answer · 2016-04-18 10:29:15Z

2

You could use something like that in the template:

<div [innerHTML]="value + 'abc ...'">
</div>

Otherwise you can use curly brackets this way into your expression...

answered Apr 18, 2016 at 10:29

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Collectives™ on Stack Overflow

Angular2 html binding (html contain variable)

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