htmlangulartypescriptionic2toast

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


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?


Solution

  • 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;
    }