Angular 5 ngx-toastr not displaying html message

user_1638800 0
Viewed 5941

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

angular5 angular
2 Answers

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

user_17494030

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

user_66386420
Related