-
Notifications
You must be signed in to change notification settings - Fork 26.6k
Description
Which @angular/* package(s) are the source of the bug?
forms
Is this a regression?
No
Description
DOM nodes are not being destroyed despite them no longer being included in the view.
This was originally found in a new component I was creating that was using *ngTemplateOutlet
and content projection. It was a wizard-like component that was showing steps. My desire was that each step would only be created once the user moved to it. This was implemented using directives, TemplateRef
and *ngTemplateOutlet
.
While I got the code working, I noticed that after leaving a step, the step's DOM was not destroyed, it was detached and still using memory.
I created a simple reproduction only using control flow and the issue is still observed. Despite no references to the form group or the formControlName
in the active code, the Form elements are leaked. It appears that Angular is hanging onto the parent component's lifecycle and only when that component is destroyed is the leaked DOM cleaned up.

Please provide a link to a minimal reproduction of the bug
https://github.com/arobinson/angular-detached-dom-form-control-name-issue
Please provide the exception or error you saw
Detached <form>
Please provide the environment you discovered this bug in (run ng version
)
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 20.0.4
Node: 24.3.0
Package Manager: pnpm 9.13.2
OS: darwin arm64
Angular: 20.0.5
... common, compiler, compiler-cli, core, forms
... platform-browser, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.4
@angular-devkit/core 20.0.4
@angular-devkit/schematics 20.0.4
@angular/build 20.0.4
@angular/cli 20.0.4
@schematics/angular 20.0.4
rxjs 7.8.2
typescript 5.8.3
zone.js 0.15.1
Anything else?
This is causing my wizard component to leak the DOM of every step that uses Angular forms. Only when the user dismisses the wizard is the memory reclaimed.