Is it possible to have newline character in Ionic2 toast?

Question

I tried both \n and < br/ >, but unfortunately not working!

Is this Possible ?

//Displaying toast to welcome user!
let user = this.currentUser();
//console.log(user);
let toast = Toast.create({
  message: 'Hi ' + user.email + '! <br/> Welcome to My App',
  duration: 5000,
  position: 'bottom'
});

toast.onDismiss(() => {
  console.log('Dismissed toast');
});

this.nav.present(toast);

Solution 1

Actually it IS possible. You can do the following:

.toast-message {
  white-space: pre;
}

and \n for a line-break.

Note: Take a look at home.ts and style.css.

See working plunkr

Solution 2

Although @iWork solution works for many situation but if you have close button in your toast it will be pushed out of screen.

So you can use these style sheet instead:

.toast-message {
  white-space: pre-line;
}

p.s you need to use \n for line break in your string

Comments

[Ankit Maheshwari]

Somehow it is not working in actual application, I written same code over plunkr (working!) but not working in my type-script file. OR this may be the issue in Ionic2

[A.W.]

Ok this is working. I first used <br/> but it works using '\n` as in the answer.

[El Dude]

I didn't have to do the css, \n worked out of the box. <br/> was a deadend