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);

http://stackoverflow.com/questions/37118385/styling-ionic-2-toast — Matt M, Jul 26 '16 at 19:38
Right. It's a similar question, where the answer appears to be "no, you can't". There's also a link to the docs. — Matt M, Jul 26 '16 at 19:43
You're wrong, Matty. It IS possible, see my answer. Furthermore it's not a similar question. Ankit asked whether it's possible to have a line break, the other guy asked whether it's possible to render HTML in Toasts. — Ben Kauer, Jul 27 '16 at 12:25

Ben Kauer · Answer 1 · 2016-07-27T12:31:16.457

19

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

edited Jul 27 '16 at 12:31

answered Jul 27 '16 at 12:21

Ben Kauer

586
3
11

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 – Ankit Maheshwari Jul 27 '16 at 15:02
1

Ok this is working. I first used `
` but it works using '\n` as in the answer. – A.W. Nov 11 '16 at 11:19
I didn't have to do the css, \n worked out of the box.
was a deadend – El Dude Dec 11 '16 at 04:59

score 11 · Answer 2 · answered Jan 28 '17 at 22:14

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

Is it possible to have newline character in Ionic2 toast?

2 Answers2