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?

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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.

Answer 5

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.