dialog not removed from DOM view after destroying the component which is created on-fly(dynamic components) using component Factory Resolver

[Goutham]

Hi,

screen1 showing that dynamic component which is containing ejs-dialog is created on fly:

Dynamic component (html part):

browser console part which showing repeatedly adding ejs-dialog part:

Why i am trying this:

We required a confirmation box through out the application.So i am creating a component which contains ejs-dialog on fly using component resolver and destroying after

closing it.For any component other than dialog is removed from DOM ,or atleast not appending to DOM.

Thank you.

[Narayanasamy Panneer Selvam]

Hi Goutham, 

 

Greetings from Syncfusion support. 

 

We have validated the issue with shared code block and we able to reproduce the reported issue. Dialog element not destroyed properly while use routing and dynamic component render approach and this information specified in our document. 

Reference link; https://ej2.syncfusion.com/angular/documentation/dialog/how-to/render-a-dialog-using-ng-template/?no-cache=1#how-to-destroy-the-dialog-component-when-navigate-pages-using-angular-routing 

So, we suggest you to manually remove the dialog target element by using id selector to find element from DOM. 

Sample code: 

html 

<ejs-dialog id="dynamicDlg"> 

</ejs-dialog> 

 

TS: 

let dlgEle: any = document.getElementById("dynamicDlg"); 

dlgEle && dlgEle.remove(); 

 

 

For your convenience we have prepared a sample, please get it from the below link. 

Sample: https://stackblitz.com/edit/angular-cqbaco-jztunp?file=app.component.html 

 

Regards, 

Narayanasamy P. 

[Goutham]

Thank you very much,Now its working as expected.

[Narayanasamy Panneer Selvam]

Hi Goutham, 

 

We are glad to here that the suggested solution resolved your issue. 😊 

 

Regards, 

Narayanasamy P.