animate.leave prevents removal of dynamically created components #65628
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
I am opening this issue as a follow-up to discussion in #65612. I have encountered a similar behavior where animate.leave prevents components from being destroyed/removed from DOM, specifically when using dynamically created components.
I have a setup with a dynamic-list component that contains a list of dynamically created Notification components.
- The Notification component is animated and designed to remove itself from the list when clicked.
- When animate.leave is applied, animations stop working entirely, and all animated elements fail to be removed from the DOM upon interaction.
- If animate.leave is commented out, the removal works as expected.
Steps to reproduce:
- Open reproduction link
- Click on toggle and content should be displayed with animation
- Click “add to list” (multiple times if desired).
- Click any item in the list — it should remove itself, but nothing happens.
- No animations work at this point: items in the dynamic list remain in the DOM, and the toggle no longer removes content.
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI : 21.0.0
Angular : 21.0.0
Node.js : 20.19.1
Package Manager : npm 10.8.2
Operating System : linux x64
┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 21.0.0 │ ^21.0.0 │
│ @angular/build │ 21.0.0 │ ^21.0.0 │
│ @angular/cdk │ 21.0.0 │ ^21.0.0 │
│ @angular/cli │ 21.0.0 │ ^21.0.0 │
│ @angular/common │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler │ 21.0.0 │ ^21.0.0 │
│ @angular/compiler-cli │ 21.0.0 │ ^21.0.0 │
│ @angular/core │ 21.0.0 │ ^21.0.0 │
│ @angular/forms │ 21.0.0 │ ^21.0.0 │
│ @angular/material │ 21.0.0 │ ^21.0.0 │
│ @angular/platform-browser │ 21.0.0 │ ^21.0.0 │
│ rxjs │ 7.8.2 │ ~7.8.0 │
│ typescript │ 5.9.3 │ ~5.9.2 │
│ zone.js │ 0.15.1 │ ~0.15.0 │
└───────────────────────────┴───────────────────┴───────────────────┘
Anything else?
No response