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

This issue has been created since 2022-11-24.

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

animations, core


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:

Reply Container Transform

And this is the standard Container Transform from Material Design:

Container Transform

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


More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-12-01
Star Count 85220
Watcher Count 3042
Fork Count 22607
Issue Count 1316


Issue Title Created Date Comment Count Updated Date
TypeError in New Project (Svelte) 2 2022-11-12 2022-11-30
Error: Cannot find module './_baseKeys' 5 2022-11-08 2022-11-30
Failed to load virtual:$histoire-setup 2 2022-11-10 2022-11-30
Colored According To Entropy Like binvis.io 3 2021-06-28 2022-10-29
[InputNumber] 受控 `value` 失效 4 2022-08-06 2022-10-06
should `ion update julia` be supported? 1 2021-06-15 2022-11-29
Does not appear to handle chained transformations correctly 2 2021-09-19 2022-10-30
Transfer ownership to metalsmith org 0 2021-10-22 2022-11-26
Ability to set custom path to Docker socket 2 2022-02-07 2022-11-11
Backport to 10.12 and down? 24 2021-09-23 2022-10-07
Change default behaviour of `silentFrames` (streaming) FrameCutter 2 2021-11-02 2022-11-25
Isvalid() and isValidphonenumber not properly validating Russian phonenumbers 1 2022-07-04 2022-11-19
Transparency Feature 7 2019-07-29 2022-01-18
Docathon | 6-11 March | Berkeley 0 2017-02-07 2022-11-13
Android : Slider + Form inputs + " fullpage_api.movex()" strange behavior 3 2022-09-17 2022-11-18
Endless loop when I try to send big message 3 2022-03-09 2022-10-31
ui: upgrade from bootstrap 4 to bootstrap 5 1 2021-11-20 2022-11-25
Restarting server on changes 6 2018-02-06 2022-11-17
会考虑加入时间轴timeline标签么? 1 2021-08-22 2022-10-31
[Feature Request] List unread books. 2 2022-08-22 2022-11-30
Two Restricted groups with the same organization scoped to the same site seems to cause Org logo to only appear once 2 2021-08-13 2021-12-31
Auto table creation on INSERT/REPLACE (aka dynamic mapping) 4 2022-08-16 2022-11-24
leaking JS prototype getter functions in evaluation (eg, .length) 6 2022-01-22 2022-11-21
Export all built-in filters as functions for direct use 3 2022-02-05 2022-11-21
Static IP address 1 2021-06-03 2022-01-11
brew install --build-from-source shivammathur/php/php fails 2 2022-01-26 2022-11-22
[Bug] Safari extension: long site name overflows poorly 1 2021-09-22 2022-11-10
Render artificial satellites orbits with artifacts 2 2022-05-20 2022-09-30
Add service.name fallback 4 2020-12-19 2022-11-23
i18n support doesn't work (_t of undefined) 3 2021-12-03 2022-10-13
Load a local cached dataset that has been modified 2 2022-06-02 2022-11-28
Update README.md 1 2019-12-06 2022-01-19
Can't add migrations on table generated with db.create_all() 2 2021-02-10 2022-11-29
Implement yarn 0 2017-05-03 2021-12-30
Free 20% speed-up with simple #pragma omp parallel for 2 2020-02-03 2022-11-18
Add method to bypass CI tasks for a PR 0 2022-07-07 2022-11-17
Story: Large Data Support / Incremental Summaries / Automatic Chunk Reuse (WIP) 6 2022-08-17 2022-09-30
Best practices for GraphQL 0 2021-07-08 2022-11-14
Optionality of a compound-key relationship wrong 0 2022-07-11 2022-10-04
Hanging indents 1 2019-11-30 2021-12-28
Need an API to determine when Python is still busy discovering interpreters 3 2022-11-08 2022-11-23
Update dependency org.slf4j:jcl-over-slf4j to v1.7.32 0 2021-07-27 2022-11-12
401 : Unauthorized oauth_consumer_key not known 2 2018-12-05 2022-11-10
Documentation not correct about acceptance testing 2 2021-01-14 2022-11-01
IJKMEDIA: stream 0, offset 0x222dd0: partial file IJKMEDIA: stream 0, offset 0x1e280: partial file IJKMEDIA: stream 0, offset 0x224cfa: partial file IJKMEDIA: stream 0, offset 0x1e32b: partial file 0 2021-06-25 2022-10-25
Preserve possibility to download older builds of old versions for maintaince reasons 1 2022-05-18 2022-10-07
大佬要不要考虑下配置文件一键导出和导入功能 3 2021-12-06 2022-11-07
Note: how to run the "any changes?" check 0 2014-11-14 2022-11-09
Boot update 0 2021-07-04 2022-01-16
AES cryptographic library working ok in .NET 4.7.2 gives the following error in .NET 6 when decrypting existing data: System.Security.Cryptography.CryptographicException: Padding is invalid and cannot be removed. 5 2022-09-29 2022-10-12