I saw recent answers,but none satisfied this Ngx-bootstrap Modal with the close button problem. I used canDeactivate to not to change the route when modal is on open
Here What i"ve done
this openModal is to open the modal here a isModalOpen is set to false on close but "Globally i initialized it with true"
openModal(msg, isVideoPhoto: boolean, isVideo: boolean) {
if (isVideo !== undefined) {
this.modalRef = this.modalService.show(msg);
}
if (isVideoPhoto !== undefined) {
this.modalService.config.backdrop = false;
}
const _combine = combineLatest(
this.modalService.onHide,
this.modalService.onHidden
).subscribe(() => this.changeDetection.markForCheck());
this.subscriptions.push(
this.modalService.onHide.subscribe((reason: string) => {
const _reason = reason ? `, dismissed by ${reason}` : '';
console.log(`onHide event has been fired${_reason}`);
this.isModalOpen = false;
})
);
this.subscriptions.push(
this.modalService.onHidden.subscribe((reason: string) => {
const _reason = reason ? `, dismissed by ${reason}` : '';
console.log(`onHidden event has been fired${_reason}`);
this.unsubscribe();
})
);
this.subscriptions.push(_combine);
}
This is for closing modal
closeModal(){
this.isModalOpen=false;
this.modalRef.hide();
}
canDeactivate:
canDeactivate(){
return this.isModalOpen;
}
This class extends a class which contains openModal(),closeModal(),canDeactivate().
export class modalClose implements CanDeactivate<DynamicContentComponent>{
canDeactivate(component: DynamicContentComponent, route:
ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> |
boolean {
console.log("canDeactivate");
return component.canDeactivate();
}
}
app-routing.module.ts:
{
path: ":ctype/:termid",
component: DynamicContentComponent,
canDeactivate:[modalClose]
}
I want to close the modal with the back button of browser without any route change and after modal closed route wants to change on back button press...!