Render HTML content in Ionic 3/4/5

Question

view.html

<div>{{text}}</div>

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

What can I do to render such content?

I've tried the earlier version (Ionic 1/2) solutions and nothing seems to work with Ionic v3.

score 81 · Accepted Answer · edited Dec 26 '18 at 16:52

81

You should use the innerHTML attribute binding like this:

<div [innerHTML]="text"></div>

Please take a look at the Angular docs for more information.

edited Dec 26 '18 at 16:52

Muhammad Omar ElShourbagy

6,718
2
32
50

answered Jun 26 '17 at 12:37

sebaferreras

44,206
11
116
134

1

Edit: innerHTML works too - but fully non-capitalized does not. – sam_v Jun 26 '17 at 15:26
1

it works for me in other case, : i had used Youtube API, which comes with encoded texts like &quote; . but this solution give me original symbol which exactly I want. Thanks bro,,, – shurvirpm Nov 16 '19 at 09:57

score 0 · Answer 2 · answered May 14 '19 at 12:40

in case you want to write it in paragraph you can do that by

<p><span [innerHTML]="htmlObject"></span></p>
<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>

score 0 · Answer 3 · answered Sep 12 '21 at 18:57

0

<div [innerHTML]="text">

This solution works but some css not work in a html. Like we got proper data from backend but not applicable into innerhtml .

answered Sep 12 '21 at 18:57

Chintan Vasoya

160
4

Render HTML content in Ionic 3/4/5

3 Answers3

Linked