DEV Community

Meckl Antal
Meckl Antal

Posted on

Prevent navigation when a modal/dialog is open in Angular 9

tl;dr: Use guards to close any open dialog, and to prevent unwanted navigation.

I was struggling with this issue on many of my previous projects, especially when the requirement was to create a PWA/mobile app, where modals usually are rendered full-screen.

I was using similar solutions, like one explained in this post.

The basic idea is that when we open a modal, we are actually not navigating between routes, but from a UX perspective, users expect that the modal will close when they hit the back button, which is not happening.

This is extremely infuriating when we have a full-screen modal, because repeatedly hitting the back button will not close the modal, but instead just navigate back and back on the website without the user noticing.

The solution I recently came up with uses guards. For this example I'm using Ionic 5.

  providedIn: 'root',
export class ModalGuard implements CanActivate {
  constructor(private readonly modalController: ModalController) {}

    _next: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return this.modalController.getTop().then((modal) => {
      if (modal) {
        return false;
      return true;
Enter fullscreen mode Exit fullscreen mode

And I use this guard for my every route.

const routes: Routes = [
    path: '',
    canActivate: [ModalGuard],
    component: TestPage,
Enter fullscreen mode Exit fullscreen mode

This guard will prevent the navigation if a modal is open, and it will close it.

Top comments (0)