Skip to content

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

@nekitbr

Description

@nekitbr

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions