Prevent page changes when a dialog is open

I'm submitting a ... [x] bug report [ ] feature request [ ] question about the decisions made in the repository
Do you want to request a feature or report a bug? A bug
What is the current behavior? I'm not sure if this is a bug, BTW If I open a dialog and click on the back or forward button of the browser, the dialog remains open while the page below changes.
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem Go to the demo (http://shlomiassaf.github.io/angular2-modal/#/bootstrap-demo), navigate to some of the available plugins (e.g. from Bootstrap to VEX Plugin, then back again to Bootstrap). Open a dialog (e.g. "alert drop in"), then click on back button, you can see that the below page now is changed, click on forward button and the page changes again.
What is the expected behavior? The dialog stays open and the page doesn't change.

@tlorenzetti Yes, this is the expected behaviour.

To prevent a page from navigating the CanDeactivate hook from @angular/router needs to be registered.

This is done via a service that implements the appropriate router interface and is registered in the router configuration

Now, from a behaviour perspective some scenarios can allow page changes while a modal is open, others might be more strict and disallow that. Pure domain specific logic.
This is why its not the responsibility of the modal library.

More over, what if one doesn't event use the router package, does the library need to force him because it depends on it?

That was just the theoretical explanation, practically speaking it probably not doable since the library does not define routes, the application developer does.

For all of the above, and more... this is something that needs to be handled by the application developer.

The library does provide tools to help with that... each Model service comes with an overlay object that holds information about the stack of open modals.

A very simple implementation will be to use the modal service to get the current amount of open modals, if its more then 0 prevent navigation.


@Injectable()
export class CanDeactivateGuard implements CanDeactivate<any> {

 constructor(private modal: Modal) {}
  canDeactivate(component: any,  route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> | boolean {
    if (this.modal.overlay.stackLength > 0) {
      return false;
    }

    return true;
 }
}

Now this is a very simple example, you'll probably need some logic and metadata.

For example, having a modal notify to a service if it a would like to prevent page changes...

shlomiassaf / ngx-modialog

Prevent page changes when a dialog is open #322