Memory leak after close angular/mat-dialog

Question

When opening and then closing a mat-dialog, the elements linked to the mat-dialog and its contents remain in the DOM as detached elements in memory. Each time a mat-dialog is opened/closed, the issue repeats, and the number of detached elements only increases (never released).

Reproduction Steps:

Create a new Angular project
Create a dialog component (example: Angular Material Dialog).
Add an element inside dialog-component.html.
Compile the project.
Open Chrome Dev Tools → Memory tab.
Take a first snapshot using the memory tool.
Open and close the dialog multiple times, then trigger garbage collection.
Take a second snapshot with the memory tool.
Compare the two snapshots.
Check the "Detached" section.

Observed Behavior:

Multiple instances of detached <mat-dialog-container> (and all children) persist in memory per open/close cycle.

image of debugger showing detached elements

After closing mat-dialog, there should be no detached elements remaining in memory (to prevent memory leaks).

mjew19 · Accepted Answer · 2025-05-09 14:10:39Z

2

I had started to notice the same thing, though I don't know if it is new or not. You can even see it occur on the angular material site, so it isn't an implementation issue. Open that first dialog without animation button a few times. If you click outside to close, the overlay is leaked, not the dialog component it self, but if you click anywhere inside the dialog at all, that becomes a leak.

https://material.angular.dev/components/dialog/examples

answered May 9 at 14:10

mjew19

534 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Memory leak after close angular/mat-dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related