# innerHTML content

**URL:** <https://forum.ionicframework.com/t/innerhtml-content/107065>\
**Category:** ionic-v3\
**Created:** [September 28, 2017, 6:30pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065 "2017-09-28T18:30:01Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nogstudio](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nogstudio](https://forum.ionicframework.com/u/nogstudio)\
**Post date:** [September 28, 2017, 6:30pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/1 "2017-09-28T18:30:01Z")

</div>

Hi. I’m working on a new project in Ionic 2 and now I’m having a problem. I’ve created a modal and it works perfect when I use \<button (click)=“openModal()”\>Open! The thing is that my content is from remote server and I’ve added the (click) option inside my php file and it doesn’t work if I click on the image. I use innerHTML to show the content from json. I also created a pipe to sanitize the content (After I searched about this I found this and it works to show the (click) button in source. Until I’ve created the pipe the (click) button didn’t even appeared in source).  
Now I have this in read.html

> \< div [innerHTML]=“entireArticle | keepHtml”\>

And in my php file.

> $article = array();  
> $article= ‘\< div\>\<img src=“image.jpg” (click)=“openModal()”\>’;  
> echo json\_encode($article);

So my content is showing with the images and all but if I click on the image nothing is happening. I’ve created another button in read.html with (click)= “openModal()” and it works. Why is not working when the content is binded? Thank you!

---

<div class="post-metadata">

**Author:** ![AaronSterling](https://avatars.discourse-cdn.com/v4/letter/a/51bf81/32.png) [@AaronSterling](https://forum.ionicframework.com/u/AaronSterling)\
**Post date:** [September 28, 2017, 6:32pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/2 "2017-09-28T18:32:25Z")

</div>

The Ionic code looks like html but isn’t. It’s meta-html that gets transpiled to real html. So you can’t use it in innerHTML. But I don’t see why you need to. You could just have the text in your innerHTML and a button after the HTML div, in your main template.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 28, 2017, 8:14pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/4 "2017-09-28T20:14:05Z")

</div>

I think it’s best to pretend `innerHTML` doesn’t exist.

---

<div class="post-metadata">

**Author:** ![nogstudio](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nogstudio](https://forum.ionicframework.com/u/nogstudio)\
**Post date:** [September 28, 2017, 8:31pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/5 "2017-09-28T20:31:21Z")

</div>

So how should I bind the content from json ?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 28, 2017, 8:33pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/6 "2017-09-28T20:33:29Z")

</div>

I would suggest using a representation language other than HTML and a template structure as described [here](https://forum.ionicframework.com/t/asking-your-advise-about-dynamic-static-loading-components-pages-html/73980/2).

---

<div class="post-metadata">

**Author:** ![nogstudio](https://avatars.discourse-cdn.com/v4/letter/n/bbe5ce/32.png) [@nogstudio](https://forum.ionicframework.com/u/nogstudio)\
**Post date:** [September 29, 2017, 12:27pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/7 "2017-09-29T12:27:58Z")

</div>

Hi. Thank you. I didn’t understand the way you’ve presented but I’ve tried in this way. As far as I saw for most of the people this method is working but for me it didn’t. I’m doing something wrong?  
I’ve imported domsanitizer

> import {DomSanitizer} from ‘@angular/platform-browser’

I’ve added inside the constructor

> constructor(public navCtrl: NavController, public navParams: NavParams, public http:Http, private modal: ModalController,private sanitizer: DomSanitizer)

And here before getting the data from url

> this.entireArticle = sanitizer.bypassSecurityTrustHtml(data[7]);

Thank you!

---

<div class="post-metadata">

**Author:** ![Boris654](https://avatars.discourse-cdn.com/v4/letter/b/ce73a5/32.png) [@Boris654](https://forum.ionicframework.com/u/Boris654)\
**Post date:** [July 27, 2018, 10:24am UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/8 "2018-07-27T10:24:40Z")

</div>

The innerHTML property is used to get or set the HTML content of an element node. The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 27, 2018, 9:31pm UTC](https://forum.ionicframework.com/t/innerhtml-content/107065/9 "2018-07-27T21:31:56Z")

</div>

> [@Boris654](#):
>
> The innerHTML property is part of the Document Object Model

No it isn’t. It’s a half-assed Angular feature that IMHO shouldn’t exist at all, because people expect it to do more than extremely limited markup, and it doesn’t.

Content projection is a much better approach. HTML belongs in templates, and `innerHTML` encourages the bad habit of putting it elsewhere.