# Rendering Html Code in Ionic 3

**URL:** <https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122>\
**Category:** ionic-v3\
**Created:** [March 10, 2018, 3:22pm UTC](https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122 "2018-03-10T15:22:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chankymallick](https://avatars.discourse-cdn.com/v4/letter/c/f4b2a3/32.png) [@Chankymallick](https://forum.ionicframework.com/u/Chankymallick)\
**Post date:** [March 10, 2018, 3:22pm UTC](https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122/1 "2018-03-10T15:22:15Z")

</div>

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.

> **[Angular 2: Display HTML without sanitizing/filtering](https://medium.com/@AAlakkad/angular-2-display-html-without-sanitizing-filtering-17499024b079)**
>
> You might have a situation where you need to display/bind HTML code into some DOM elements.

```auto
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

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

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

```

usage of pipe

```auto
 <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 ??

---

<div class="post-metadata">

**Author:** ![intelinc](https://avatars.discourse-cdn.com/v4/letter/i/b5a626/32.png) [@intelinc](https://forum.ionicframework.com/u/intelinc)\
**Post date:** [March 11, 2018, 9:10am UTC](https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122/2 "2018-03-11T09:10:22Z")

</div>

Try using bypassSecurityTrustResourceUrl instead of bypassSecurityTrustHtml for iFrames. See here: [SafeResourceUrl](https://angular.io/api/platform-browser/SafeResourceUrl)

---

<div class="post-metadata">

**Author:** ![Chankymallick](https://avatars.discourse-cdn.com/v4/letter/c/f4b2a3/32.png) [@Chankymallick](https://forum.ionicframework.com/u/Chankymallick)\
**Post date:** [March 11, 2018, 4:29pm UTC](https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122/3 "2018-03-11T16:29:23Z")

</div>

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

```auto
bypassSecurityTrustHtml()

```

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

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:46pm UTC](https://forum.ionicframework.com/t/rendering-html-code-in-ionic-3/124122/4 "2021-07-19T21:46:01Z")

</div>