Search code examples
javascriptangularjstoastr

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?

Solution

  • 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