17

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?

DavidRR
  • 18,291
  • 25
  • 109
  • 191
jaycer
  • 2,941
  • 2
  • 26
  • 36

1 Answers1

24

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

jaycer
  • 2,941
  • 2
  • 26
  • 36
  • 1
    Just a minor observation, in the second example where you use the named parameters, the 'text' (it does not exist) property should be replaced by 'body'. Beyond that, thanks for the extensive answer. – jmrivas Jan 12 '22 at 21:12
  • 1
    @jmrivas I edited the answer, nice find – jaycer Feb 15 '22 at 14:44