Change ngx-toastr default style using enableHtml property. Angular 7

Question

I'm using toastr to display messages and I have and error message that comes with an url with the solution so I'm using the enableHtml property from toastr to create and <a element and pass the URL like this:

if(!res){
        this.toastr.error('Revise los requisitos <a href=\"https://www.google.com\" target=\"_blank\">AQUI</a>',
        'title' , {
                 enableHtml: true,
                 closeButton: true,
                 timeOut: 10000
             });
      }

This is working fine, the thing I want to know if is there a way to change the color and size of the link replacing the default style of the toastr. I know this can be made with a custom toast, but this is the only part of my code where I would need it so it's not worth it to create a whole toast just for one message, that's why I want to know if using the enableHtml property I can pass new style to the link or something.

Are you using https://www.npmjs.com/package/ngx-toastr ? – Yuchao Wu Mar 04 '20 at 23:15 — Yuchao Wu, Mar 04 '20 at 23:15

score 2 · Accepted Answer · answered Mar 04 '20 at 23:28

You could probably override the link style via css:

Define a class for your link, e.g. "toastr-link"

<a href=\"https://www.google.com\" target=\"_blank\" class=\"toastr-link\">AQUI</a>

In global style.scss or style.css file, define overrided style (e.g. make font color as green) for that class ("toastr-link")

.toastr-link{
    color: green !important;
}

Full example can be found in this stackblitz link:

https://stackblitz.com/edit/angular-q8xewq

Hope it helps!

Change ngx-toastr default style using enableHtml property. Angular 7

1 Answers1