Not showing unless hovering

[hellseyfer]

It was working well but after some issues and updates of angular dependencies it won't show normally unless i hover it. Already tried without animation without success

[higgs01]

i'm having the same issue

[trevor-hackett]

By the way you've described what is happening, it sounds like it's not working properly unless you trigger change detection on the toast.

Are you triggering the toast outside of change detection or outside of angular's zone?

[higgs01]

@yarrgh not that i know of, i've just followed the guide in https://github.com/scttcper/ngx-toastr#setup and https://github.com/scttcper/ngx-toastr#use

Here is my code:

Styles:

/* You can add global styles to this file, and also import other style files */
@import '~ngx-toastr/toastr.css';
body {
  margin: 0;
}

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    FormComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AngularEditorModule,
    RecaptchaModule,
    RecaptchaFormsModule,
    ReactiveFormsModule,
    ToastrModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

form.component.ts

constructor(private _types: PlugintypeService, private _toastr: ToastrService) { }

  ngOnInit() {
    this._types.getPluginTypes().subscribe(types => {
      this.types = types;
    });
  }

  public onSubmit(): void {
    if (this.createForm.status === 'INVALID') {
      console.warn('Form invalid');
      this._toastr.error('Formular nicht vollständig', 'fehler');
    } else {
      console.warn(this.createForm.value);
    }
  }

[trevor-hackett]

Yes, I can confirm that this is happening. Not sure exactly why though.

Funny thing is, if you turn on the progress bar it works fine.

Example:

  click() {
    this.toastr.success('testing', 'Test', { progressBar: true });
  }

The contents of the toast are not being added...

...until something triggers change detection to run, which then causes the contents to appear.

[nikhilpatel7]

I was facing the same issue. But after digging for hours I was able to find the solution... There's a naming collision for the .toastr CSS class in bootstrap and ngx-toastr. You can find out the solution on : https://stackblitz.com/edit/angular-avcidu Source of solution: https://stackoverflow.com/questions/53989445/ngx-toastr-toast-not-showing-in-angular-7#

Thanks

[higgs01]

@nikhilpatel7 thank you very much. This solved it for me

[scttcper]

duplicate of #602 probably

[trevor-hackett]

I don't think this is specific to bootstrap. I performed my tests with a new angular-cli project without bootstrap and was able to get this strange behavior to happen. The behavior I saw is due to angular not populating the toast with the contents until change detection is ran (mouse over)

[trevor-hackett]

Here a repo with the issue: https://github.com/yarrgh/test-toast-app

I can't duplicate it on StackBlitz. If you run ng serve or run ng build --prod and then serve the dist files, you should be able to see what I'm seeing.

[trevor-hackett]

I think the issue I found may be separate from the OP but I'm not entirely sure until they respond.

[scttcper]

@yarrgh you don't have animations loaded?

[trevor-hackett]

Touché.

That's what I get by going too fast. I stopped once I "duplicated" the issue.

[hellseyfer]

My issue could be related to angular material or angular updates, it was working fine with bootstap. Just wanted to know if it was only me, thanks

[ngKisor]

add this to your global style.css

toast-container > div {

opacity:1;

}

[ianbeemsterboerr]

I am having the same issue, and I can confirm that the problem is a collision with bootstrap, cause when I commented out the bootstrap reference in my styles attribute on angular.json the toasts showed up fine. However, even when I added:

toast-container > div {

opacity:1; }

to my global styles css (which I assume is app.component.css in an angular project) the issue kept on persisting.

[Hernior]

I am having the same issue, and I can confirm that the problem is a collision with bootstrap, cause when I commented out the bootstrap reference in my styles attribute on angular.json the toasts showed up fine. However, even when I added:

toast-container > div {

opacity:1; }

to my global styles css (which I assume is app.component.css in an angular project) the issue kept on persisting.

I had to do a few more things for this to work on my Angular + Bootstrap project, my styles.css looked like this:

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}

I hope this workaround help some of you guys.

[segux]

Im having the same issue but just only with first toastr.

And looks like is an error of javascript, not css

[SOLVED] My error was not importing BrowserAnimationsModule correctly.

[pnutmath]

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

[ianbeemsterboerr]

After combining what @abhaygawade and @Hernior advised it works for me.

[nicolas-b12]

Found this in toastr.css :

.toast-container .toast:hover {
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}

Is it normal ?

[naveenkengannar]

I am facing the same issue while using the latest Bootstrap 4.2.1. I tried all the workarounds given above but none of them fixed the issue. Anyone has tried the version of Bootstrap 4.2.1 and fixed the issue by any chance?

[guibleme]

After combining what @abhaygawade and @Hernior advised it works for me.

I reproduced again the Module thing, with the corrective css on my styles.css and I can say that it works. So, literally go to app.module and rearrange the app imports.

import { CommonModule } from '@angular/common'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

[pnutmath]

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

No need to override the ngx-toastr styling. If animation module properly set. This will manage opacity thing

[sandrumirceaioan]

No need to override the ngx-toastr styling. If animation module properly set. This will manage opacity thing

My modules are in the exact same order as you guys described, but nothing except css trick works...

[tomjvdberg]

I can confirm that the issue is introduced when I upgrade bootstrap to 4.3.1. Reverting to my previous version of 4.1.3 solves the issue.

Problem is that bootstrap uses the same class .toast with "opacity: 0;". Solution is to have this set in the toastr.css ".toast-container .toast " as "opacity: 1;" since it will overwrite the bootstrap style.

Created a pull request https://github.com/scttcper/ngx-toastr/pull/623

[stramunin]

Another solution: don't import toast, if you don't use it in your project. Remove @import "toasts" from your scss file.

My style.scss with latest bootstrap, excluding some files:

// import bootstrap 4
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/list-group";
@import "~bootstrap/scss/close";
@import "~bootstrap/scss/modal";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/print";

// import ngx-toastr styles
@import '~ngx-toastr/toastr-bs4-alert';

// code...

See: https://getbootstrap.com/docs/4.3/getting-started/theming/#importing Source code: https://github.com/twbs/bootstrap/blob/master/scss/bootstrap.scss

[marchage]

Yeah, but for my setup that is not a solution. I am not importing 22+ bootstrap scss files but a simple cdn version. What would work in that is case is to append the fix from Tom's pull request ( #623 ) to your main src/styles.scss file. If you have one of course. And if it doesn't interfere with other "stuff" in your project.

.toast-container .toast {
  opacity: 1;
}

[EDIT] Oh sorry, didn't see @Hernior 's comment from january 8th

[deckerbd]

Just ran into this as well after updating to the latest version of Bootstrap. The snippet by @Hernior worked for me. Are there any plans to fix this?

[scttcper]

@deckerbd looking to make a bunch of breaking changes around the ivy release and make this fix a part of that. It requires breaking changes. The opacity: 1 isn't a good fix and ideally people wouldn't import toast styles they aren't using.

If you're using bootstrap with scss you should not import the toast styles see #602

[trevor-hackett]

Can somebody try 9.2.0 and see if this works without needing to add the additional css? From my initial quick tests on an empty project using Bootstrap 4.3.1 and ngx-toastr 9.2.0 toasts are showing up without having to add the opacity css in my project.

Edit It's not fixed if you're using the ToastNoAnimation component instead of the default component. If you're not using a custom component (using the default component), it should be fixed in this version. Let us know if you're still seeing the same issues with 9.2.0.

[scttcper]

:tada: This issue has been resolved in version 10.0.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[Hernior]

🎉 This issue has been resolved in version 10.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

Thank you Scott <3

[andrebrz]

Adding BrowserAnimationsModule immediate after BrowserModule or CommonModule works. This is about module positioning

Perfect! Thank you!

[prasanga-b]

you need to import BrowserAnimationsModule in app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and also add that in the @NgModule imports array

[SamiHK]

@pnutmath your answer solved the issue for me. Thank you soo much!

[amiram]

I'm using ng9 with toastr 12.1.0. Trying to show a toast from a service listening to firebase messaging. Nothing here helped other than progressBar: true. Even if I showing the toast in the component that holds the service and call detectChanges(), still not working unless hovering.

[camposfyi]

Im having the same issue but just only with first toastr.

And looks like is an error of javascript, not css

[SOLVED] My error was not importing BrowserAnimationsModule correctly.

Thanks. This solved it for me.

[kapil26021994]

hi @nicolas-b12 Hi sir can you tell me how to add CSS dynamically on progress bar?