Animations with HostBinding used within Sidenav. Leaks detached DOM nodes

[FionaTreveil]

All DOM elements should be removed when the sidenav is removed

DOM elements relating to TransitionAnimation and all sub-nodes remain as detached

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-qnd8ry?file=app%2Ftwo.ts
click between links one and two leaves all elements on the page in memory as detached HTML elements

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Using Chrome and Firefox with Angular animations 7.2.4 and Angular material 7.3.1

Is there anything else we should know?

Similar to closed bugs 18606 and 8862 which are both marked as fixed.
The mat-drawer code is including an animation trigger with HostBinding.
When the drawer is destroyed, the animation information is not released, leaving references to playersByElement/statesByElement in TransitionAnimationEngine. The result is that all of the nodes within the drawer are left as detached elements when the sidenav is removed.

[jelbourn]

Potentially related to #15322

[TrevorBroderick1]

Is there any workaround known for this issue? It does not appear to have been fixed with #15322 as I'm still seeing it in Angular 14.1.

[crisbeto]

We've switched the sidenav away from the animations module so this shouldn't be an issue anymore. See #30235.

[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.}