9

I would like to use html code
in primeng toast module. I have tried different options but cannot get it to work.

this.messageService.add({ sticky: true, severity: 'error', summary: 'Import job', detail: 'first line of text <br\>second line of text'});

anyone suggestions?

6 Answers 6

12

In order to use an HTML content in the p-toast, you can use a very simple custom message template.

<p-toast position="top-center">
    <ng-template let-message pTemplate="message">
        <p innerHtml="{{message.detail}}"></p>
    </ng-template>
</p-toast>

No extra variable needed, the template uses the message variable which is native to the Primeng component.

1
  • Did anyone get this working with a routerlink in Angular? Mar 31, 2021 at 19:52
10

Actually you can with a little tick in CSS, declaring this in your main sylesheet:

.ui-toast-detail {
   white-space: pre-line;
}

Now yours \n will work in the message :)

1
  • 1
    For v12 at least, the class that needs to receive this style is p-toast-detail. Changing the class name makes this fix work perfectly. Jun 22, 2021 at 21:21
6

make variable to bind your data in it and when call your function call it like this and make sure that detail is empty

descreption : string = '';

showInfo(descreption) {
  this.descreption = descreption;
  this.messageService.add({severity: 'info', summary: 'samary', detail:''});
}

and in html use ng-template and bind your data using innerHtml and pass your variable like this

  <p-toast [style]="{marginTop: '80px'}" styleClass="custom-toast">
      <ng-template let-message pTemplate="message">
        <div style="text-align: center">
          <p  innerHtml="{{descreption}}"></p>
        </div>
      </ng-template>
  </p-toast>
2
  • For me it works just with: <p-toast> <ng-template let-message pTemplate="message"> <p innerHtml="{{message.details}}"></p> <!-- .details in my particular case--> </ng-template> </p-toast> May 14, 2019 at 8:35
  • AMAZING !! This worked perfectly, and exactly what I wanted, as I was displaying notifications from an app-wide service, so couldn't bind to an Angular variable. May 14, 2020 at 9:03
5

You can make it add in the html definition the following:

<p-toast [style]="{'white-space': 'pre-line'}" ></p-toast>

and in the component you can try it with the following code:

let arrays: string[] = ['first line', 'second line'];
    this.messageService.add({ summary: 'Title',  detail:  arrays.join('\n'), severity: 'warn', sticky: true });

Regards.

0
0

You cannot use HTML in the detail of the MessageService because it will not render the HTML. Your only option if you want multiple lines, is to utilize the ng-template to build your dialog how you want.

1
  • I thought the same thing... but it's not true. See Ayman's solution below. May 14, 2020 at 9:02
0
<p-toast>
  <ng-template let-message pTemplate="message">
    <div style="flex: 1" [innerHtml]="message.detail"></div>
  </ng-template>
</p-toast>

Using this option, you can insert any HTML without breaking any design issues of close button.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.