Print html content in Ionic2 page

Question

I have a ionic2 page and i want to print HTML inside the ion-item: Here is the ionic2 page:

@Page({
    templateUrl: './html-page.html',
})
export class Demo{

    htmlString:string = "Hello<br/><br/>Html"

    constructor() {
    }
}

and here is the corresponding template:

<ion-content>
    <ion-card>
        {{htmlString}}
    </ion-card>
</ion-content>

And now Hello<br/><br/>Html is output. but i want that

Hello

Html

will be output.

Answer 1

Please try it this way.

<ion-content>
<ion-card>
<div [innerHTML] = "'<p>' + htmlString + '</p>'"></div>
</ion-card>
</ion-content>

Hope this helps you. Thanks.

Answer 2

You may also use iframe if you want to display render your html text - big one too.

some.html

Hello<br/><br/>Html

then:-

<ion-content>
    <ion-card>
        <iframe src="some.html"></iframe>
    </ion-card>
</ion-content>