Topic: [Bug] ToastService toastClass not working

Weiser pro asked 5 years ago


i've copied your example code for a test message and dont get the same example:


let options= { progressBar:true, timeOut:3000, toastClass:'black'};
this.toast.warning('Warnig message', 'Toastr warning!', options);

i've changed the toastClass value to diffrent colors, which took no effect.
moreover i would like to pass own css as argument. Is this possible?
as you can see the opacity before hover is too low. I would like to set it to opacity: 0.95.

trying toastClass:'opacity: 0.95' directly in options and
toastClass:'opacity' -> in component.scss -> .opacity{opacity: 0.95}

didn't worked for me.

Damian Gemza staff answered 5 years ago

Hello, Dear Weiser, if you want to change opacity of your’s toasts – please head to _toast.scss file, located in path: /assets/scss/angular/pro/_toast.scss , and find id called:
#toast-container > mdb-toast-component
In that ID, please change opacity ( line 22 ), and -ms-filter( line 23 ) and filter ( line 24 ) to desired value. Default it’s 0.8.
For changing background color of toast title, please create toast like this below:
showSuccess() {

let options= { closeButton:true, tapToDismiss:false, titleClass:'red' };

this.toastrService.success('Hello world!', 'Toastr success!', options);

Above should help you. If not, please let me know.
Best Regards,

Weiser pro commented 5 years ago

Hi Damian, thank you for answering. Could you please explain what arguments toastClass can take? setting toastClass:'black' or to other colors wont change the view. it would be great if you could pass own css to toastClass like: let options= { progressBar:true, timeOut:3000, toastClass:’opacity: 0.95; ...’}; this.toast.warning(‘Warnig message’, ‘Toastr warning!’, options); i would like to avoid taking changes to node modules, because you have to change them again after npm install. is there really no other way to do this?

Damian Gemza staff commented 5 years ago

Hello Weiser, toastClass takes string as value. For example, if you want to your toast got black background and opacity 1.0, you have to create some class like .black { background-color: black !important; opacity: 1.0 !important}, and put it to global styles.scss sheet. Without !important it won't work, because our color classes like toast-warning or toast-success got higher priority than toastClass. If something isn't clear to you, feel free to post another comment. Best Regards, Damian

Weiser pro commented 5 years ago

Hi Damian, adding css class to global styles.scss has done the trick! I've tried it before by adding it to local component scss. Could you add this to your documentation? that might be a important missing information. thank you!

Damian Gemza staff commented 5 years ago

I'm glad that my solution works for you. Yes, i'll put this in our docs :)

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes