Render HTML content in Ionic

Question

I have the following template:

<ion-view view-title="Playlist">

  <div class="list list-inset">
      <div class="item item-divider item-text-wrap">
          {{post.titulo}}
      </div>
      <div class="item">
          <img src="{{post.image}}" width="100%" />
      </div>
      <div class="item item-divider" style="font-size:14px;font-weight:normal;text-align:right">
          {{post.fecha}} - By: {{post.autor}}
      </div>
      <div class="item item-text-wrap">
          {{ post.contenido }}
      </div>
  </div>

The question is that 'post.contenido' has HTML that I wish to be displayed as it should but it only show the HTML tags and text.

What can I do to render such content?

Kind regards.

Answer 1

I think you should change your code to:
<div class="item item-text-wrap" [innerHTML]="post.contenido"> </div>

Answer 2

Let's say you have a scope variable with html in it !

$scope.someHTML = "<h1>Big Nice Title here</h1>";

You should be able to output it as so

<div ng-bind-html-unsafe="someHTML"></div>

..in your case it should be like this

[...]
<div class="item item-text-wrap" ng-bind-html-unsafe="post.contenido"></div>
[...]

Answer 3

works for me without unsafe.. so the solution is

<div class="item item-text-wrap" ng-bind-html="post.contenido">