innerHTML content

#1

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!

#2

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.

#4

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

#5

So how should I bind the content from json ?

#6

I would suggest using a representation language other than HTML and a template structure as described here.

#7

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!

#8

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

#9

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.