Proper way to bind html? (ng-bind-html in V1)


#1

So, bare with me, because I just started V2 today.

I’ve started with the tutorial tabs application, and I’ve created a provider that is pulling down some JSON. Unfortunately, part of the JSON is a string containing HTML that I need to bind to the DOM.

In V1, it would look like this:

<div ng-bind-html="myObject"></div>

I’ve been googling for hours, and can’t find the proper way to do this in Angular 2.

I came across this article, which says to use the following syntax:

<div [inner-html]="myObject"></div>

but when I go to that tab now, I get a blank page and no errors in the console.

I’ve found other articles that say I need to create a custom component, but I can’t even figure that out right…

Anyways, I’ll keep researching. Just wondering if there was a simple answer that I am overlooking.


#2

Hi I’ve got a similar problem - did you ever discover how to do this? cheers


#3

` <div [innerHTML]=“myObject”>

`

#4

In order to bind the HTML use innerHTML attribute and if you want to do an interpolation then do it this way:

<div [innerHTML]="yourHtmlData"></div>

There are some issues with the binding the html, Angular strips down all the css, It also removes the id attribute as well, This issue is happening with ionic-angular 2.0.0.beta 8 and 9 i.e with angular 2.0.0.rc1 and 2.0.0.rc2.


#5

OK that works for me. Very many thanks to you both.