Render HTML Ionic 2

Ionic Framework ionic-v3
1

I use [innerHTML] = {{content}} to render HTML. But this way stripped some tag of my content. Ex : iframe tags.
How can i do another way?
Somebody help me, pls. Thanks so much.

2

Hi,

i wrote a component for displaying wordpress content which removes script tags and also detect internal links

How to use:
<wordpress-content [content]="page?.content?.rendered" (link)="onInteralLink($event)"></wordpress-content>

Hope this helps.

1 Like
3

thank you! I resolved this problem. I use this.sanitizer.bypassSecurityTrustHtml(data.content_text);

4

I faced the same problem as you, iframe tag can’t be showed by using [innerHTML]. Could you please kindly explain how to use this.sanitizer.bypassSecurityTrustHtml(data.content_text); ? Many thanks !

5

For others that may be looking for an answer, here is my attempt. Keep in mind that if the target site has set their X-Frame-Options to SAMEORIGIN, you will not be able to embed it.

// In your .ts backing file, at the declaration-level
import { DomSanitizationService } from '@angular/platform-browser';

// in your constructor, include the declaration and assignment
constructor(private sanitizer: DomSanitizationService, ......) {....}

Now, in your page’s html, add the binding like so where FIELD is the object that you want to embed:
<p [innerHTML]="sanitizer.bypassSecurityTrustHtml(FIELD)"></p>

That’s it. Hope this helps.

1 Like