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