[Feature] Add Component Life-cycle Hook `ngOnElementDestroy` for Better Animations

[Char2sGu]

Which @angular/* package(s) are relevant/related to the feature request?

animations, core

Description

Currently, as ngOnDestroy is called before the removal animation of a component, a lot of fantastic removal animations cannot be implemented easily and we have to use confusing workarounds for these animations.

For example, @angular/cdk/portal portals will detach from the portal outlet in the ngOnDestroy hook. Therefore, there would be no content for portal outlets in removal animations: StackBlitz Demo

The problem above can actually be easily solved by using ngTemplateOutlet instead of cdkPortalOutlet, but in many cases the problem can be really hard to work around.

I am currently working on implementing the app "Reply" of Material Studies in this repository. I am using the directive libLayoutProjectionNode and the component injection tree to build a tree of nodes, so that I can implement the Container Transform animation by using the Layout Projection technique. The Layout Projection technique basically creates a snapshot of the layout before changing the dom, and transform the elements from their old layouts to their new layouts after the dom has changed.

This is the best Container Transform that we can implement using Angular:

And this is the standard Container Transform from Material Design:

As you can see, our Container Transform works mostly well except that there is no crossfade transition.

Here comes the problem - It's completely impossible to implement a crossfade transition because it's impossible to get the old tree of nodes as them have already been detached from their parents in the ngOnDestroy hook to avoid memory leak. 🤷

Proposed solution

I propose that we should have a new life-cycle hook, which is invoked after the element of a component is actually removed from the DOM. A proposed name can be ngOnElementDestroy.

Developers should consider using this new ngOnElementDestroy hook to clean up their components/directives if the code they put in the ngOnDestroy hook changes the DOM.

This should significantly make the DOM more stable for removal animations.

I know that it's probably not the best choice to introduce a new life-cycle hook, but I failed to find out a better solution. 🤷

Alternatives considered

Otherwise WE HAVE TO DO A LOT OF COMPLICATED WORKAROUNDS TO IMPLEMENT THESE FANTASTIC REMOVAL ANIMATIONS!!!!!!!!!

[thePunderWoman]

This issue was closed as obsolete due to the introduction of the new animate.enter and animate.leave APIs. The @angular/animations package is now deprecated and will be removed in Angular v23. We hope you give the new APIs a try.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}