I want to add html code from a variable inside a for loop in angular 2:
<ul>
<li *ng-for="#c of myHtmlItems">
{{c.myHtml}}
</li>
</ul>
The html is only added as a string
-
In alpha.52 ng-for becomes ngForTGH– TGH2015-12-11 01:48:15 +00:00Commented Dec 11, 2015 at 1:48
Add a comment
|
3 Answers
Update to angular2.0.0
<ul>
<li *ngFor="let c of myHtmlItems" [innerHTML]='c.myHtml'></li>
</ul>
- *ng-for has been replaced with *ngFor
#has been replaced withlet- inner-html with innerHTML
(better to use property binding like this
[innerHTML]='c.myHtml'instead ofinner-html="{{c.myHtml}})
Comments
you could do:
<ul>
<li *ng-for="#c of myHtmlItems" inner-html="{{c.myHtml}}></li>
</ul>
4 Comments
daniel
this works but removes all other html already exists in the child node
kit
you could create element inside li, eq. div and set it's inner html
daniel
I have other tags (x3dom) and only mentioned <ul> as an example. But it works for now. Thanks.
TGH
In alpha.52 ng-for becomes ngFor
instead of ng-for, give a try with ng-repeat. As mostly ng-repeat is useful in very different ways
<ul>
<li ng-repeat="element in myHtmlItems">
{{element}}
</li>
</ul>
