Menu
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
560
Navigate to the utility folder and create an Angular service. Import the ngx-toastr service inside the NotificationService. Create a method called showSuccess to show success notification toasts. The notification.service.ts file should look similar to this:
Adding ngx-toastr to the Angular App. Install ngx-toastr using Node Package Manager (npm). ngx-toastr also requires the @angular/animation package as a dependency. Once you have installed the above packages, open the <project-directory>/angular.json file and include the toastr CSS.
Import the ngx-toastr service inside the NotificationService. Create a method called showSuccess to show success notification toasts. The notification.service.ts file should look similar to this: Import the NotificationService wrapper inside the RootComponent and call the showSuccess method to show toast messages.
Let's have a look at how you can add a wrapper for ngx-toastr in your Angular application. Create an Angular service called notification, which you'll use in your application for showing the toastr message. In src/app create a folder called utility. Navigate to the utility folder and create an Angular service.
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
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
