Search code examples
cssangularngx-toastr

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

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.

Solution

  • You could probably override the link style via css:

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

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

    1. 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!