Rendering Html Code in Ionic 3

Ionic Framework ionic-v3
1

I am getting encoded Html String from server in JSON , it can contain any kind of HTML including normal Html tags , Embeded Youtube,Instagram,Twitter links . And i want to render as it is.

As Angular restrict dynamic html rendering for security reason i used pipes and dom sanitizer as explained here.

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {
    }

    transform(content) {
        return this.sanitizer.bypassSecurityTrustHtml(content);
    }
}

app.module.ts

import { EscapeHtmlPipe } from '../pipes/keep-html.pipe';

firebase.initializeApp(firebaseConfig);
@NgModule({
  declarations: [    
    EscapeHtmlPipe
  ],

usage of pipe

 <div class="articleContent" [innerHTML]="getDecodedTrimmedText(Feed.content) | keepHtml" >    
  </div>

It works with simple div,span but not with iframe and some other html tags.

Is there any way that we completely bypass this filtering and render what ever is coming in JSON ??

2

Try using bypassSecurityTrustResourceUrl instead of bypassSecurityTrustHtml for iFrames. See here: SafeResourceUrl

3

It was my mistake, decoding of Html was not happening properly, thats why it was not rendering.

I fixed the encoding, decoding issue and understood that

bypassSecurityTrustHtml()

method will render anything html including embeded social post,
HTML need to be clean thats it.