angular: Leave animation triggers child ngOnDestroy immediately
I’m submitting a…
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
ngOnDestroy is called when the :leave animation starts.
Expected behavior
ngOnDestroy should be called after the :leave animation finishes.
Minimal reproduction of the problem with instructions
- Wait for the
:enteranimation to finish. The element background is red during the whole duration of the animation. - Click the “Hide” button. The red background is removed immediately when the animation starts.
If replays are necessary, use the “Show” button to restart the reproduction.
What is the motivation / use case for changing the behavior?
If the destroy method makes visual changes to the component or directive, these will be visible during the leave animation. This results in unexpected behavior for the user.
Environment
Angular version: 4.4.6
Also reproducible in 5.0.0-rc.3
Browser:
- all
About this issue
- Original URL
- State: open
- Created 7 years ago
- Reactions: 31
- Comments: 16 (2 by maintainers)
I am having this issue as well within Angular 9.1.7 and DevExtreme 20.1.7. Is there any timeline on an expected fix?
We’ve reached Angular 12 and the issue still seems to persist. Looks like this won’t be changed at all I guess.
Now is angular 8 and I still have this problem
I also need to do something when the component is ACTUALLY destroyed, AFTER running the animation. The hook is called “onDestroy” but actually the component is still existent when an animation is running.
Is there any workaround?
Too bad this is open since 4 years now 😦
Unfortunately we can’t change this around for the current Angular. Perhaps including a new lifecycle hook in the future to handle this would be a solution.