angular
bug(matTabs): mat-tab-link leaves behind detached DOM elements when removed in Angular 16
Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
In Angular 16 when "mat-tab-link" gets removed from the DOM it leaves behind detached DOM elements, which are not cleaned up by the garbage collector, resulting a memory leak.
I can't reproduce this issue with Angular Material version 17.0.3. Would it be possible to include the fix in Angular Material version 16?
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-d5ewez Please download the code from stackblitz and run it locally. Steps to reproduce:
- Click "Toggle test" button multiple times while observing DOM node count in Chrome performance monitor (run GC manually)
Expected Behavior
When you remove a “mat-tab-nav-bar” that contains at least one “mat-tab-link” and run the garbage collector, the DOM node count returns to its original value before the nav bar was created.
Actual Behavior
When "mat-tab-link" gets removed from the DOM it leaves behind detached DOM elements, which are not cleaned up by the garbage collector.
Environment
- Angular: 16.2.12
- CDK/Material: 16.2.12
- Browser(s): Google Chrome 120.0.6099.71 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Microsoft Windows Version 22H2 (OS Build 19045.3693)
