Angular 5 ngx-toastr not displaying html message

Question

I'm using Angular 5 with ngx-toastr. I have used the following code which renders HTML tag along with the message like: Hi<b>Hello</b> which is not expected.

this.toastr.warning("Hi<b>Hello</b>");

Also, I used the below code which has no console error neither any output (popup):

this.toastr.show("<font color=\"red\">Hi<b>Hello</b></red></font>",null,{
disableTimeOut: true,
tapToDismiss: false,
closeButton: true,
positionClass:'bottom-left',
enableHtml:true
});

How can I enable HTML in ngx-toastr so that message can looks like: hiHello

Sajeetharan · Accepted Answer · 2018-10-31 07:04:49Z

15

Change your configuration as follows as the order of parameter matters,

this.toastr.show('<font color=\"red\">Hi<b>Hello</b></red></font>"',
           'title' , {
                    enableHtml: true,
                    closeButton: true,
                    timeOut: 10000
                });

STACKBLITZ DEMO

answered Oct 31, 2018 at 7:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hackp0int Over a year ago

How is it possible to add a Confirm button on the toastr?

Kapil Soni Over a year ago

@Sajeetharan can you tell me how call the function from inside show?

2 revs · Accepted Answer · 2022-07-02 09:51:49Z

I solved this problem as below, you can set IndividualConfig these settings.

export class NotificationService {
    public toastrConfig: Partial<IndividualConfig> = {
    timeOut: 20000,
    extendedTimeOut: 20000,
    enableHtml: true
};

    constructor(private notifyService: ToastrService) {
        
    }

    setNotification(type: MessageType, message?: string, statusCode?: number, panelName?: string, err?: any) {

        switch (type) {
            case MessageType.Success:
                this.notifyService.success(message ? message : 'Başarılı: .', "İşlem Başarılı Olmuştur");
                break;
            case MessageType.Info:

                this.notifyService.info(message ? message : 'Uyarı: .', panelName);
                break;
            case MessageType.Danger:
                let exceptionMessage = err === undefined ? "" : err;

                if (panelName) {
                    exceptionMessage += '<div style="margin-bottom: 4px">Panel adı: <span style="font-weight: bold">' + panelName + '</span> </div>';
                }

                if (statusCode) {
                    exceptionMessage += 'Durum kodu: ' + statusCode + '<br>';
                }

                if (!message) {
                    exceptionMessage += 'İşlem başarısız.';
                } else {
                    exceptionMessage += message;
                }

                this.notifyService.error(exceptionMessage, panelName);
                break;

            default:
                break;
        }

    }

[stackblitz1

Collectives™ on Stack Overflow

Angular 5 ngx-toastr not displaying html message

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related