I created an external window in the Angular application, everything works fine but I want to close the external window after application logout
written the code below, I'm moving from 1 page to another page then the external window closing properly. If I press the logout button then the external window does not close (ngOnDestroy is not called in the case of application logout)
ngAfterViewInit() {
this.externalWindow = window.open('', '', `width=${this.wWidth},height=${this.wHeight},left=${this.wLeft},top=${this.wTop}`)
this.host = new DomPortalOutlet(
this.externalWindow.document.body,
this.componentFactoryResolver,
this.applicationRef,
this.injector
)
this.host.attach(this.portal)
}
ngOnDestroy() {
this.externalWindow.close()
}
this.externalWindow.close()
is indeed the functionality you need to use. The problem is that you need to trigger it upon logout click as well. You can have something like
onClick="closeExternalWindow()"
of course, you need to implement closeExternalWindow which does the logout for externalWindow and then call this function both on destroy and logout click.
ngOnDestroy fires only when component destroys. In the logout use case, we are redirecting to the login URL which means it refreshes the page (This is outside angular workflow) hence ngOnDestroy not firing.
If I move 1 route to a different route within the application then ngOnDestroy fires and closes the external window.
This article helped me to find the solution ngOnDestroy not firing on page reload
Solution:
ngOnInit() {
window.onbeforeunload = () => this.ngOnDestroy()
}