0

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...!

0 Answers0