Leave animation triggers child ngOnDestroy immediately

[gyoshev]

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

Reproduction plunkr

1. Wait for the :enter animation to finish. The element background is red during the whole duration of the animation.
2. 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

[Florent-Passerelle]

Same here and really annoying when using third party modules...

Otherwise we can listen to .done event :

@HostListener('@exitTransition.done', ['$event'])
animationEnded(e:AnimationTransitionEvent) {
    if (e.toState == 'void') {
      console.log("Actual destroy");
   }
}

[matsko]

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.

[lorado]

Hello. Can you say, when do you plan to implement a solution?

The described behaviour by @gyoshev exists also in angular 6.1. I created an example on stackblitz: https://stackblitz.com/edit/angular-s1ikhg

[ds-codemag]

Now is angular 8 and I still have this problem

[Ploppy3]

Is it possible to fix this with Angular 9 Ivy ?

[waterplea]

Still an issue. My components implement a breakdown logic which I wanted to delay a bit when they are removed from ngFor, animations would work just fine for it but unfortunately ngOnDestroy is called immediately :(