Bootstrap modal window does not close when changing route in angular 5

Question

When using the version of "@ ng-bootstrap / ng-bootstrap": "1.0.0-beta.6" everything looks fine in my Angular 5 application. But if I have a button in the modal window that starts changing the route, the modal window does not close even after changing the route.

In a small study, I found something like: in previous versions of the bootstrap, when we click on a modal window, we use to see the code associated with the modal window inside a specific component and when the route changes as the component is destroyed, even to use the modal window are destroyed. But in the current version, I see the code associated with the modal window, almost at the end of the body tag, which does not work with changing the route.

Is there a way to close the modal route change?

Answer 1

Try defining ngOnDestroy on your parent component and check if the modal is open or not when changing the route.

modalWindow = null;
openModal(){
 this.modalWindow.open('YourComponent')
}

ngOnDestroy(){
 if(this.modalWindow !== null) this.modalWindow.close()
}

Answer 2

I updated my code in such a way as to be able to process modal windows from anywhere in the application.

In component:

import {SharedService} from './shared.service.ts';
constructor(private _sharedService: SharedService) {}
this._sharedService.openModal(content);
ngOnDestroy() {
   this._sharedService.closeModal();
}

In general service:

modalRef: any;
openModal(modalname) {
this.modalRef = this.modalService.open(modalname);
}
closeModal() {
   if (this.modalRef) {
       this.modalRef.close();
   }
}