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.

You could try using the ion-view tag and inject a html template to it. — Vandervidi, Nov 28 '15 at 21:56
Ok, After looking around a little bit, ignore my first comment. Did you try some thing like this? http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html — Vandervidi, Nov 28 '15 at 22:06
do you need double data-binding for contenido var? If yes create a directive if not more easy but not angular friendly use JQUERY :) — ezain, Nov 29 '15 at 11:58

score 7 · Answer 1 · answered Nov 08 '16 at 09:20

7

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

answered Nov 08 '16 at 09:20

Duannx

7,501
1
26
59

@AlessandroOrnano Glad to hear that :D – Duannx Jan 24 '19 at 07:43

score 4 · Accepted Answer · edited Jul 20 '17 at 17:16

4

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>
[...]

edited Jul 20 '17 at 17:16

mitchken

790
9
26

answered Nov 29 '15 at 21:25

S.Galarneau

2,194
1
24
26

2

It's been solved using the directive 'ng-bind-html' instead of 'ng-bind-html-unsafe'. – Apalabrados Nov 30 '15 at 11:45

score 1 · Answer 3 · answered Mar 13 '17 at 09:09

1

works for me without unsafe.. so the solution is

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

answered Mar 13 '17 at 09:09

Rifqi Abdul Aziz

11
1

Render HTML content in Ionic

3 Answers3