ngx-toastr not displaying until I refresh the page

[Ahmid]

I am using ngx-toastr in my application and after each deployment, the toastr messages doesn't show until I refresh the page and try again, only after I refresh it starts working normally without issues.

1. We are using Google Chrome
2. The Toastr container is being created, but the toast message itself is not being displayed
3. We are not using CDN.
4. No conflict with bootstrap css
5. CSS is added properly into style.css (@import '~ngx-toastr/toastr.css';)

[Ahmid]

My investigation is leading to the following:

This line is evaluating to true even if the DIV is not created in the DOM

[geezz07]

Hi any update on this? I am also experience a similar issues. On the initial page the toast does not appear until I navigate to another page and then all the toast works.

This is what I see when debugging. The toast object is added to the array however nothing is displayed on screen.

[Ahmid]

@geezz07 I solved it by automatically adding the div on each run.

Step.1: Import ToastContainerModule

Step.2: Inject the container:

Step.3: Add the HTML:

[geezz07]

Thanks!

What I found in my case was that my page was very long and requires scrolling. The toast actually did display but it was at the bottom of the page, I had to scroll to the bottom of the page to see the toast. After looking at #955 I was able to resolve it by adding

.toast-container {
  position: fixed;
}