Ionic: render HTML from JSON

Ionic Framework ionic-v3
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>
2 Likes
4

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

3 Likes
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

1 Like
6

js code

variable = {"html": "<p>This is a paragraph</p>"};

html code

<div [innerHTML]=variable.html>
</div>