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`](https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html) to implement this. — drew moore, Apr 18 '16 at 10:38

score 3 · Answer 1 · answered Apr 18 '16 at 10:31

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 '16 at 10:31

So is it impossible to accomplish this? – Emilio Weba Mar 15 '17 at 15:39
I wouldn't say impossible, but not plain simple either ;-). You can create a component at runtime like explained in http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 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. – Günter Zöchbauer Mar 15 '17 at 15:41

score 2 · Answer 2 · answered Apr 18 '16 at 10:29

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 '16 at 10:29

Thierry Templier

2 Answers2