Ionic - Rendering html content

Question

I just wanna know how can I render html content on an Ionic application taking the content from a property of the relative class.

For example, I have the following two files...

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    message: String;

    constructor(public navCtrl: NavController) {
        this.message =
            `Below there is a piece of cake for you:<br />
            <img src="http://image.ibb.co/nJVNVS/cake.png" />`;
    }

}

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h2>Welcome to Ionic!</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
        {{message}}
    </p>
</ion-content>

Then, when I run this Ionic application I get the following output:

The image was not rendered. Instead, there is its html tag.

Do you have any idea on how can I make this image gets rendered?

Thanks.

Answer 1

If you want to insert HTML into the element you can add the [innerHTML] property to the <p>, this will render the content of the message variable as HTML inside the <p> element.

<ion-content padding>
    <h2>Welcome to Ionic!</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps 
        that are going to primarily use a Tabbed UI.
    </p>
    <p [innerHTML]="message"></p>
</ion-content>