How to add a custom class without replacing 'toast'?

[ghost]

Sorry if this is answered somewhere, but I want to add some custom styles to an individual toast popup (e.g. increase width). I see the toastClass config option - but this replaces the toast class which has essential styles applied to it (from bootstrap styles).

Is the only way to copy all the styles attached to .toast into my own custom class?

[trevor-hackett]

In CSS you can add your own .toast class and add/override any CSS properties that you want.

[ghost]

@yarrgh Thanks, but that would apply to all my toasts. I'm wondering if I can target one specific toast (that is displaying HTML content) without affecting other toasts and without having to copy all the styles that are attached to the toast class.

[keljoundi]

I 2nd this. it would be very convenient to simply add styling in addition to the defaults. Copying all styles to a custom class still introduces errors for me such as the onTap and onAction events no longer firing

[umaqs]

This is a much-needed feature.
I need to show popups of different colours and one way to do that is, extend Toast component like in pink toast example but in my case, I would have to create 10 different custom components.

if there is any other way please let me know.

Thank you

[scttcper]

put 'yourclass ngx-toastr' for toastClass?

[umaqs]

@scttcper Thank you for the quick reply.

I tried adding my class with the property of background-color and toast class but it shows a toast with transparent background with no padding also close button and onTap action are not working.

However, if I use toastClass: my-class ngx-toastr`` it gives me a black toast but the rest of the properties are what I want.

Can you please suggest how can I use it in the correct manner.

Thank you very much in advance :)

[scttcper]

i had success by being more specific with the classes. could also try !important.

.yourclass.toast-success {
  background-color: blue;
}

[umaqs]

Thank you very much 👍

I have this working with the css you provided and then specifying toastClass: 'ngx-toastr toast-success yourclass'

As you can see I had to use both ngx-toasts and toast-success to make it work.

One more quick question, please.

I have to put my class in styles.css. I would want to move it to the component level css file, its the place I am calling toasterService.show() from. Is it possible to do so?

Once again thank you for the help!

[scttcper]

the toast is not inside the context of your component so scoped css would not be applied. custom toasts would be the closest you could get but would still require positioning styles applied globally

[axell9641]

Is there any way I can change the position of the toastr from within a component? I see the toastClass gets applied to the content, not the container.

[sami-colon]

i had success by being more specific with the classes. could also try !important.

.yourclass.toast-success {
  background-color: blue;
}

This worked like charm.

[lvilca-tekton]

I can't get this to work, I am trying this in my .ts file
I have imported the toastrService to it, then I use

this._toastrService.success('test','test',{toastClass:'yourclass ngx-toastr'})

In the same dir, I have an css file

.yourclass .toast-message {
    background-color: blue;
}

I don't see it blue, am I doing smth wrong?

[scttcper]

🎉 This issue has been resolved in version 16.0.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Ashish-rajpoot]

node_modules/ngx-toastr/toastr/toast.directive.d.ts:8:18 - error TS2707: Generic type 'ɵɵDirectiveDeclaration' requires between 6 and 8 type arguments.

[SagarStake]

My requirement is to show a countdown timer in the toastr message, is there any way to do this?
Is there a way for the toastr to use templateRef element to show in the message. That way I can use an observable value in the templateRef to show the dynamic value of the observable at any given time.

[shubham-bajaj]

.yourclass.toast-error{
background-color: blue !important;
}
const toastrConfig: Partial = {
closeButton: true,
progressBar: true,
timeOut: 10000,
toastClass: 'yourclass ngx-toastr'
};
can you please explain me why this is not working?

[marjanjavid]

If you'd like to apply a custom style (e.g., a background color) to all your toastr messages, follow these steps:

   ToastrModule.forRoot({
     toastClass: 'ngx-toastr custom-toast' // Add custom class to all toasts
   })

and in the styles.scss

.ngx-toastr.custom-toast {
  background-color: #FF9900 !important; /* Replace with your desired background color */
  color: #FFFFFF !important; /* Customize text color */
}

But if you want to only change the background color for the "info" toastr messages while keeping other toastr types (success, warning, error) unchanged, follow these steps:

.toast-info {
  background-color: #17a2b8 !important; /* Replace with your desired background color */
  color: #ffffff !important; /* Adjust text color if necessary */
}

[vinodsantharam]

.toast-info {
  background-color: #17a2b8 !important; /* Replace with your desired background color */
  color: #ffffff !important; /* Adjust text color if necessary */
}

exactly what I needed! Thanks @marjanjavid 🥇