36

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.

3 Answers 3

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.

2
  • 1
    Edit: innerHTML works too - but fully non-capitalized does not.
    – sam_v
    Jun 26, 2017 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, 2019 at 9:57
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.