Angular 2: How do you render HTML from a JSON response without displaying the tags to the user? [duplicate]

Question

Edit: a clarification for anyone who only skimmed the title, my question is about Angular 2, not 1.

I have a component template that is something like this:

<div>{{ post.body }}</div>

The object is something like:

{
    "title": "Some Title",
    "body": "<p>The <em>post body</em>.</p>"
}

Instead of rendering the paragraph like:

The post body

it displays:

"<p>The <em>post body</em>.</p>"

Since it's such a common task, I looked for a built-in pipe like {{ post.body | safe }} but didn't see one.

Is there is an easy way to get that working? Is there a safe way to get that working?

please see: stackoverflow.com/questions/17826758/… and/or stackoverflow.com/questions/23747474/… — Michael Stilson
– Michael Stilson, Commented Jan 21, 2016 at 23:09
@PhiterFernandes - the JSON is from a service that obtains it from mock data at the moment, similar to how it's done on the angular.io tutorials. — R891
– R891, Commented Jan 22, 2016 at 0:55

Sasxa · Accepted Answer · 2016-01-22 01:04:23Z

220

In Angular2 you can use property binding to access properties of DOM elements, in your case:

<div [innerHTML]="post.body"></div>

answered Jan 22, 2016 at 1:04

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

@CSchulz then what should be the secure way of doing it

You should only do it if you are sure that the source is trusted.

If you bind to html with [innerHTML]="yourHtml" in Angular 4 it will sanitize the string and remove any <script> tags: angular.io/guide/security#sanitization-and-security-contexts

@ibgib yup you don't need it anymore, Angular now sanitizes html content by default: angular.io/guide/security#sanitization-and-security-contexts

|