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

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: http://stackoverflow.com/questions/17826758/angularjs-render-html-tags-that-are-contained-in-a-string and/or http://stackoverflow.com/questions/23747474/how-to-show-html-in-angularjs-template-instead-of-string — Michael Stilson, Jan 21 '16 at 23:09
or http://stackoverflow.com/questions/20436579/how-to-have-angularjs-output-escaped-html, or http://www.google.com — Langley, Jan 21 '16 at 23:11
@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, Jan 22 '16 at 00:55

score 220 · Accepted Answer · answered Jan 22 '16 at 01:04

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 '16 at 01:04

Sasxa

5

But you should not do that https://angular.io/docs/ts/latest/guide/security.html#!#xss – CSchulz Oct 25 '16 at 11:35
4

@CSchulz then what should be the secure way of doing it – Abhishek Tripathi Dec 15 '16 at 04:26
3

You should only do it if you are sure that the source is trusted. – CSchulz Dec 15 '16 at 13:34
1

I want to append stuff to my html and not replace the innerHtml. Didn't find a solution so far. – Paulo Pedroso May 09 '17 at 01:30
13

If you bind to html with `[innerHTML]="yourHtml"` in Angular 4 it will sanitize the string and remove any – CascadiaJS Jul 01 '17 at 17:47
how to use other tags, like
inside the div?
– Rafael Jul 19 '17 at 08:57
@CascadiaJS Thanks for the security link. Does that mean that the `safeHtml` pipe in the other post (https://stackoverflow.com/a/41089093/4275029) is not needed? – Aug 30 '17 at 12:31
2

@ibgib yup you don't need it anymore, Angular now sanitizes html content by default: https://angular.io/guide/security#sanitization-and-security-contexts – CascadiaJS Aug 30 '17 at 16:37
If you need to use buttons or scripts, then pass the html through DomSanitizer.bypassSecurityTrustHtml (care, html must be from trusted source) – Laurie Clark Jun 15 '18 at 08:19
How to render ** – Gopala Raja Naika Dec 16 '19 at 12:01

1 Answers1