Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

toast flyIn animation is broken - Angular 18 Standalone - provideZoneChangeDetection configuration #1027

Open
nekitbr opened this issue Oct 31, 2024 · 0 comments

Comments

@nekitbr
Copy link

nekitbr commented Oct 31, 2024

When using angular 18 with Standalone architecture (following most recent default way of installing angular, in their docs), the animations from toast will not run for the flyIn part (fade-in). The animations on flyOut (fade-out) work fine.
This is because of provideZoneChangeDetection({ eventCoalescing: true }), this configuration comes from the default angular installation.

Here's an image where I open all of these toasts, notice how only some of them are running the fade-in animation:
image
I don't know what are the criteria for the flyIn animation to trigger, but the first toast always works

Here's an image where they're all closing, at the same time without any issue:
image

Here's a StackBlitz example, with provideZoneChangeDetection({ eventCoalescing: true }):
https://stackblitz.com/edit/stackblitz-starters-c2dgtr?file=src%2Fapp%2Fapp.config.ts
To disable this config, go to src/app/app.config.ts and remove it, or remove all parameters being passed into the method.

I do not know what are the effects of disabling provideZoneChangeDetection, but I'm pretty sure this is a bug within ngx-toastr, since the flyOut animation works as expected

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant