Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Put a line break (newline) into a toastr message in AngularJS?

I'm using this code to display toasts on an AngularJS site. I need to know how to put a line break (<br/>) into the body. When I use the options shown in this question, toastr renders the tag on screen, rather than interpreting it as HTML. How can I get a line break into a toast?

like image 868
jaycer Avatar asked Jul 06 '15 19:07

jaycer


People also ask

How do I add a new line in AngularJS?

The newline character is \n in JavaScript and many other languages. All you need to do is add \n character whenever you require a line break to add a new line to a string.

What is a Toastr message?

Toast messages help to deliver simple feedback to the user. They most often follow an action performed by a user and provide information regarding the success or failure of that action. Toast messages are informative, have a lifespan of just a few seconds and take up a very small portion of the screen.


1 Answers

There are two ways to allow some HTML tags, including line breaks, in a toast.

Include 'body-output-type': 'trustedHtml' in toaster-options:

<toaster-container toaster-options="{
    'closeButton': false,
    'debug': false,
    'position-class': 'toast-bottom-right',
    'onclick': null,
    'showDuration': '200',
    'hideDuration': '1000',
    'timeOut': '5000',
    'extendedTimeOut': '1000',
    'showEasing': 'swing',
    'hideEasing': 'linear',
    'showMethod': 'fadeIn',
    'hideMethod': 'fadeOut', 
    'body-output-type': 'trustedHtml'
}"></toaster-container>

Or include 'trustedHtml' in a call to toaster.pop():

toaster.pop('success', 'Saved', 'Saved<br/>it!', 3000, 'trustedHtml');

or

toaster.pop({
    type: 'success',
    title: 'Saved',
    body: 'Saved<br/>it!',
    bodyOutputType: 'trustedHtml'
});

Source

like image 96
jaycer Avatar answered Sep 28 '22 01:09

jaycer