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?
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With