This is because of how inner-html effect things. Since the innerHtml can could dangerous, the browser will prevent any javascript from effecting the html that gets rendered. You really shouldn’t be using inner-Html for that reason.
This is not a good enough reason. You first need to understand why people wants that feature. If you think that it is not the way to implement the feature you need to provide an alternative way. I believe this is an Angular2 issue rather than ionic2 but still in my opinion the need comes first.
When you received some HTML from a trusted site, you need to reformat some of it if you want to be part of a component.
We need to define “the feature” in a broader way. When it starts out with “I want to do exactly what I did with ng-include in Angular 1”, the conversation doesn’t go anywhere. That’s not possible with Angular2, due to deliberate design decisions.
I think this is not a very practical setup for Angular2 applications. I think it is much better to deliver JSON or some sort of alternate like Markdown, and convert that into a collection of components in the Angular app.
I agree with your first statement but my scenario as stated is broad.
I don’t know what “not a very practical setup means”. Of course if I could work with JSON I would do it, but the only thing I received is formatted HTML with HREF in it. If I want to make those links work in my app, I need to change them to fit angular2/ionic2 routing.
Then I would parse out the href strings, and then pass them as property bindings: <a [href]="linkTarget">. What I’m calling “not very practical” is trying to jam HTML received from an external source into an Angular component. I don’t think of HTML as a useful transfer format here, but if it’s all you have then I would transform it as soon as possible to something more amenable to binding into Angular components.
I’m assuming you’re talking about external links. If you mean internal links within your application, that’s another issue because of the current state of disconnect between Ionic and Angular’s router.
They don’t. That is the point and that is why I need to change some of the HTML given to me to fit how I want the application to work. I understand that dynamically generated HTML with Angular2 directive is not supported by innerHTML or any other capability of current Angular2.
I also need something like innerHtml. I used innerHtml for some articles users can edit in the CMS, a html snippet can look like this:
<p><strong>Quasi temporibus commodi sunt. Incidunt sed occaecati nesciunt esse. Error quas veritatis facere quae. Nostrum et aut illum ut aliquid dolorem qui.</strong></p><p>Et ea facere sit <i>aliquid</i> vero aut. Inventore quo ut atque voluptas reprehenderit ut omnis. <a href="....">Similique nulla</a> eos earum optio. Voluptate sit quo et suscipit minima rerum cumque.</p>
What would be best and safest way to add this in my Ionic 2 page?
Personally, I think allowing users to input or edit HTML that will eventually be displayed is a bad idea. Sanitizing HTML is hard. Any chance you could switch to something like markdown?
We use CKEditor so we can switch to markdown. We need bold, italic, images, hrefs and an option to add movies. But how can I convert the markdown to HTML if can’t use HTML? Or is that a stupid question?
If you’re rendering the markdown to HTML, then you can rely on the markdown renderer not to make bad HTML, and that makes things safer. You can start out trying to use innerHTML with the HTML result of the markdown renderer. Hopefully that will be enough for your needs.
If it’s not, there is an (not exactly trivial, I won’t lie to you) alternative. You can parse the markdown halfway into a tree/sequence structure and walk through the tree producing elements that can be iterated into a giant ngSwitch for each type of element.
