There is a problem with memory release when Dialog is dynamically opened and closed.

[wills]

Take a heap snapshot before clicking [Open]

          Click [Open] to call out a dynamic Dialog, and then close it.

          

          Take a heap snapshot again.

Problems encountered when checking memories:          

1.[TestDialogPage] component still found in the structure, which hasn’t been released.

2. Many events still found in the EventEmitter, which hasn’t been released.



Example：https://stackblitz.com/edit/angular-ziwmk4?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp%2Ftestdialog%2Ftestdialog.ts,src%2Fapp.component.css

[Kokila Poovendran]

Hi wills,


We sincerely apologize for any inconvenience caused by the memory release issue you've encountered. We have carefully reviewed your query and identified the behavior you are experiencing.

Upon investigation, we found that when the ESP key is pressed to close the dialog, the dialog hides but is not removed from the DOM. This behavior is intentional for the component.

If your requirement is to remove the dialog element from the DOM when it is hidden, you can achieve this by using the following code snippet:

<div *ngIf="isDialogVisible">

  <ejs-dialog

    id="modalDialog"

    #modalDialog

    [header]="header"

    [content]="content"

    isModal="true"

    allowDragging="true"

    [width]="500"

    [enableResize]="false"

    [closeOnEscape]="true"

    (close)="dialogClose()"

  >

  </ejs-dialog>

</div>

 

 

 

  export class TestDialogPage implements OnInit, OnDestroy {

    @ViewChild('modalDialog') modalDialog!: DialogComponent;

    public header: string = 'Software Update';

    public content: string = 'Your current software version is up to date.';

    public isDialogVisible: boolean = false;

 

    private testingData: any[] | null = null;

 

    constructor() {}

 

    ngOnInit() {

     

      this.testingData = [];

 

      let i = 0;

 

      while (i < 10000) {

        i++;

        this.testingData.push({ id: i });

      }

    }

 

    ngAfterViewInit() {

        this.isDialogVisible = true;

    }

 

    ngOnDestroy() {

      this.testingData = null;

    }

 

    public dialogClose = (): void => {

      this.isDialogVisible = false;

    }

 

 

n the provided code snippet, we have utilized *ngIf to set the variable isDialogVisible to true during the initial render. When the dialog is closed, we set this variable to false, preventing the dialog from being maintained in the DOM.

Additionally, we have prepared a video illustration for your reference.

Please test this solution on your end, and if you encounter any further issues, feel free to reach out to us. We are here to assist you.

Regards,

Kokila Poovendran.

Attachment: DialogMemoryLeak_4929b0a2.zip