use html in primeng p-toast

Question

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?

score 13 · Answer 1 · answered Aug 30 '19 at 10:06

13

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.

answered Aug 30 '19 at 10:06

Daniel Olszewski

13,995
6
58
65

Did anyone get this working with a routerlink in Angular? – Nicholas Graham Mar 31 '21 at 19:52
The original template, which also shows summary and icons, can be found [here](https://github.com/primefaces/primeng/blob/master/src/app/components/toast/toast.ts). – user7217806 Aug 12 '23 at 23:41

score 11 · Accepted Answer · answered Oct 19 '18 at 06:51

11

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 :)

answered Oct 19 '18 at 06:51

Jesé Romero

187
3

2

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. – Fernando Echeverria Jun 22 '21 at 21:21

score 6 · Answer 3 · answered Nov 01 '18 at 13:58

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>

answered Nov 01 '18 at 13:58

Ayman Ali

211
2
12

For me it works just with:
– Carnaru Valentin May 14 '19 at 08: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. – Mike Gledhill May 14 '20 at 09:03

score 5 · Answer 4 · answered Mar 22 '20 at 21:59

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.

score 0 · Answer 5 · answered Sep 24 '18 at 16:34

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.

answered Sep 24 '18 at 16:34

BillF

804
10
20

I thought the same thing... but it's not true. See Ayman's solution below. – Mike Gledhill May 14 '20 at 09:02
@MikeGledhill it's above now :D – Paul E. Stanciu May 02 '23 at 10:52

score 0 · Answer 6 · answered Nov 05 '22 at 20:21

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.

answered Nov 05 '22 at 20:21

Haseena P A

16,858
4
18
35

use html in primeng p-toast

6 Answers6