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.

Answer 1

You could probably override the link style via css:

1. Define a class for your link, eg "toastr-link"

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

2. In global style.scss or style.css file, define overrided style (eg 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!