Ionic: render HTML from JSON


#1

I found reference to using <div ng-bind-html="variable.html"></div> where variable.html is escaped html from a json payload. I can render the html using {{variable.html}} but this is not what I want. Using ng-bind-html doesn’t work, it’s just a blank/empty div.

Any help is appreciated


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

#4

This way will render only simple html tags (Components tags will not render)


#5

Which is for a reason (check angular docs on innerhtml)

There is abundance of talk about dynamic rendering in angular in this forum

And the summary is (without personal preferences)

  • use structural directives like ngif and ngswitch
  • use innerhtml
  • template binding and dynamic css
  • proprietary libraries that generate markup on top of angular
  • use internal classes and methods of angular to manipulate the dom (eg dynamiccomponent loader)
  • leave angular and go for direct dom writes using jquery, js or somethibg else, risking dom conflicts with angular

Rgdz
Tom