1

I want to open a popup modal when the user clicks on the browser back button. It should not redirect the user to the previous page but it should open a popup and wait for user action.

ngOnDestroy(){
    this.finishModal.show();
}

Currently, it's redirecting to the previous page and try to open the popup simultaneously which results in redirecting to the previous page and then a backdrop of the modal shows up on the page. I tried preventDefault() as well.

How to just open the modal and stop the execution of ngOnDestroy()?

Akash Agrawal
  • 2,219
  • 1
  • 17
  • 38

2 Answers2

1

ngOnDestory can't be used for that purpose, only to clean up (like unsubscribing event listeners or observables)

Without the router Is there any lifecycle hook like window.onbeforeunload in Angular2? might do what you want,

with the router https://angular.io/api/router/CanDeactivate (see also https://angular.io/guide/router#candeactivate-handling-unsaved-changes) might work.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Can I call a function written in from canDeactivate? – Akash Agrawal Dec 06 '17 at 11:01
  • I don't think there is an easy way. You can use a shared service that you inject to the deactivate guard and to the component and make the component register itself with the service, then the service can make the component available to the guard. It would be better (if possible) to move the relevant code to the service directly, so that the service doesn't need a reference to the service. – Günter Zöchbauer Dec 06 '17 at 11:04
0

Emit an event on ngDestroy and listen to it on parent component and open popup. It will work for sure.

Lakin Mohapatra
  • 1,097
  • 11
  • 22