How to use HTML for adding new lines in Ionic2 toasts?

Question

I try to get some new lines into a toast message.

    let toast = this.toastCtrl.create({
        message: "First line<br />Second line.",
        duration: 5000,
        dismissOnPageChange: true
    });
    toast.present();

But it shows just the tags. How can I get new line (and other HTML tags) into a toast message?

Answer 1

Rendering HTML tags is not possible here

There is no way to view HTML tags in toast message as of now due to the way in which toast component's template renders message by using double-curly braces of interpolation

Reference in IonicFramework Source: File / Commit

Alteratively, to add new lines in message body for any HTML element

You may use \x0A or \n along with style="white-space: pre-line;"

Solution

let toast = this.toastCtrl.create({
    message: "First line<br />Second line.",
    duration: 5000,
    dismissOnPageChange: true,
    cssClass: "className",
});
toast.present();

.className{
   white-space: pre-line;
}