192

I would like to warn users of unsaved changes before they leave a particular page of my angular 2 app. Normally I would use window.onbeforeunload, but that doesn't work for single page applications.

I've found that in angular 1, you can hook into the $locationChangeStart event to throw up a confirm box for the user, but I haven't seen anything that shows how to get this working for angular 2, or if that event is even still present. I've also seen plugins for ag1 that provide functionality for onbeforeunload, but again, I haven't seen any way to use it for ag2.

I'm hoping someone else has found a solution to this problem; either method will work fine for my purposes.

1
  • 3
    It does work for single page applications, when you try to close the page/tab. So any answers to the question would be only a partial solution if they ignore that fact. Nov 22, 2016 at 8:47

9 Answers 9

370

To also cover guards against browser refreshes, closing the window, etc. (see @ChristopheVidal's comment to Günter's answer for details on the issue), I have found it helpful to add the @HostListener decorator to your class's canDeactivate implementation to listen for the beforeunload window event. When configured correctly, this will guard against both in-app and external navigation at the same time.

For example:

Component:

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm dialog before navigating away
  }
}

Guard:

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate()
      ? true
      : // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
        // when navigating away from your angular app, the browser will show a generic warning message
        // see http://stackoverflow.com/a/42207299/7307355
        confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
  }
}

Routes:

import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';

export const MY_ROUTES: Routes = [
  { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];

Module:

import { PendingChangesGuard } from './pending-changes.guard';
import { NgModule } from '@angular/core';
  
@NgModule({
  // ...
  providers: [PendingChangesGuard],
  // ...
})
export class AppModule {}

NOTE: As @JasperRisseeuw pointed out, IE and Edge handle the beforeunload event differently from other browsers and will include the word false in the confirm dialog when the beforeunload event activates (e.g., browser refreshes, closing the window, etc.). Navigating away within the Angular app is unaffected and will properly show your designated confirmation warning message. Those who need to support IE/Edge and don't want false to show/want a more detailed message in the confirm dialog when the beforeunload event activates may also want to see @JasperRisseeuw's answer for a workaround.

25
  • 3
    This works really well @stewdebaker! I have one addition to this solution, see my answer below. Feb 8, 2017 at 8:42
  • 1
    import { Observable } from 'rxjs/Observable'; is missing from ComponentCanDeactivate Jun 19, 2017 at 21:42
  • 2
    I had to add @Injectable() to the PendingChangesGuard class. Also, I had to add PendingChangesGuard to my providers in @NgModule Jun 30, 2017 at 0:02
  • 7
    It's worth noticing that you must return a boolean in case you are being navigated away with beforeunload. If you return an Observable, it will not work. You may want to change your interface for something like canDeactivate: (internalNavigation: true | undefined) and call your component like this: return component.canDeactivate(true). This way, you can check if you are not navigating away internally to return false instead of an Observable.
    – jsgoupil
    Aug 12, 2018 at 19:43
  • 3
    I did everything as above, but it only works for route change but doesn't work for browser event window:beforeunload. How can I make this work only when user tries to close or refresh their browser?
    – Raj Baral
    Apr 22, 2020 at 23:23
86

The router provides a lifecycle callback CanDeactivate

for more details see the guards tutorial

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}
@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

original (RC.x router)

class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
    return this.permissions.canActivate(this.currentUser, this.route.params.id);
  }
}
bootstrap(AppComponent, [
  CanActivateTeam,
  provideRouter([{
    path: 'team/:id',
    component: Team,
    canActivate: [CanActivateTeam]
  }])
);
4
  • 45
    Unlike what the OP asked for, CanDeactivate is -currently- not hooking on the onbeforeunload event (unfortunately). Meaning that if the user tries to navigate to an external URL, close the window, etc. CanDeactivate will not be triggered. It seems to work only when the user is staying within the app. Jul 20, 2016 at 12:04
  • 4
    @ChristopheVidal is correct. Please see my answer for a solution that also covers navigating to an external URL, closing the window, reloading the page, etc. Jan 20, 2017 at 15:35
  • This works when changing routes. What if it's SPA ? Any other way to achieve this ? Jan 30, 2017 at 21:40
  • stackoverflow.com/questions/36763141/… You would this need with routes as well. If the window is closed or navigated away from the current site canDeactivate won't work. Jan 30, 2017 at 21:42
72

The example with the @Hostlistener from stewdebaker works really well, but I made one more change to it because IE and Edge display the "false" that is returned by the canDeactivate() method on the MyComponent class to the end user.

Component:

import {ComponentCanDeactivate} from "./pending-changes.guard";
import { Observable } from 'rxjs'; // add this line

export class MyComponent implements ComponentCanDeactivate {

  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm alert before navigating away
  }

  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    if (!this.canDeactivate()) {
        $event.returnValue = "This message is displayed to the user in IE and Edge when they navigate without using Angular routing (type another URL/close the browser/etc)";
    }
  }
}
12
  • 5
    Good catch @JasperRisseeuw! I didn't realize that IE/Edge handled this differently. This is a very useful solution for those who need to support IE/Edge and don't want the false to show in the confirm dialog. I made a small edit to your answer to include the '$event' in the @HostListener annotation, since that is required in order to be able to access it in the unloadNotification function. Feb 8, 2017 at 15:21
  • 1
    Thanks, I forgot to copy ", ['$event']" from my own code so good catch from you as well! Feb 9, 2017 at 8:57
  • the only solution the works was this one (using Edge). all others works but only shows default dialog message (Chrome/Firefox), not my text... I even asked a question to understand what is happening Feb 10, 2017 at 12:23
  • @ElmerDantas please see my answer to your question for an explanation of why the default dialog message shows in Chrome/Firefox. Feb 13, 2017 at 15:17
  • 2
    Actually, it works, sorry! I had to reference the guard in the module providers. Mar 7, 2018 at 7:56
21

I've implemented the solution from @stewdebaker which works really well, however I wanted a nice bootstrap popup instead of the clunky standard JavaScript confirm. Assuming you're already using ngx-bootstrap, you can use @stwedebaker's solution, but swap the 'Guard' for the one I'm showing here. You also need to introduce ngx-bootstrap/modal, and add a new ConfirmationComponent:

Guard

(replace 'confirm' with a function that will open a bootstrap modal - displaying a new, custom ConfirmationComponent):

import { Component, OnInit } from '@angular/core';
import { ConfirmationComponent } from './confirmation.component';

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal';

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {};

  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      this.openConfirmDialog();
  }

  openConfirmDialog() {
    this.modalRef = this.modalService.show(ConfirmationComponent);
    return this.modalRef.content.onClose.map(result => {
        return result;
    })
  }
}

confirmation.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Unsaved changes</h4>
    </div>
    <div class="modal-body">
        Navigate away and lose them?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

confirmation.component.ts

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    templateUrl: './confirmation.component.html'
})
export class ConfirmationComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

And since the new ConfirmationComponent will be displayed without using a selector in an html template, it needs to be declared in entryComponents (not needed anymore with Ivy) in your root app.module.ts (or whatever you name your root module). Make the following changes to app.module.ts:

app.module.ts

import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfirmationComponent } from './confirmation.component';

@NgModule({
  declarations: [
     ...
     ConfirmationComponent
  ],
  imports: [
     ...
     ModalModule.forRoot()
  ],
  entryComponents: [ConfirmationComponent] // Only when using old ViewEngine
2
  • 1
    is there any chance of showing custom model for browser refresh ?
    – k11k2
    Aug 10, 2018 at 10:01
  • There must be a way, although this solution was OK for my needs. If I time I'll develop things further, although I won't be able to update this answer for quite a while sorry! Aug 12, 2018 at 23:12
20

June 2020 answer:

Note that all solutions proposed up until this point do not deal with a significant known flaw with Angular's canDeactivate guards:

  1. User clicks the 'back' button in the browser, dialog displays, and user clicks CANCEL.
  2. User clicks the 'back' button again, dialog displays, and user clicks CONFIRM.
  3. Note: user is navigated back 2 times, which could even take them out of the app altogether :(

This has been discussed here, here, and at length here


Please see my solution to the problem demonstrated here which safely works around this issue*. This has been tested on Chrome, Firefox, and Edge.


* IMPORTANT CAVEAT: At this stage, the above will clear the forward history when the back button is clicked, but preserve the back history. This solution will not be appropriate if preserving your forward history is vital. In my case, I typically use a master-detail routing strategy when it comes to forms, so maintaining forward history is not important.

1
9

For Angular 15, class-based route guards have been deprecated and replaced by function-based route guards. For more details, see this link.

I took @stewdebaker's excellent solution and made the necessary changes. The only changes are to the guard itself and that you don't need any module updates.

Component (no change from @stewdebaker's)

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    // insert logic to check if there are pending changes here;
    // returning true will navigate without confirmation
    // returning false will show a confirm dialog before navigating away
  }
}

Guard

import { CanDeactivateFn, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

// Full solution found here: https://stackoverflow.com/a/41187919/74276
// and then changed to use the function-based method of doing route guards
// Updated solution found here: https://stackoverflow.com/a/75769104/74276

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean | Observable<boolean>;
}

export const PendingChangesGuard: CanDeactivateFn<ComponentCanDeactivate> = (
  component: ComponentCanDeactivate
): Observable<boolean | UrlTree> => {
  return new Observable<boolean | UrlTree>((obs) => {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate()
      ? obs.next(true)
      : // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
        // when navigating away from your angular app, the browser will show a generic warning message
        // see http://stackoverflow.com/a/42207299/7307355
        obs.next(
          confirm(
            'WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.'
          )
        );
  });
};

Routes (no changes from @stewdebaker's)

import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';

export const MY_ROUTES: Routes = [
  { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];

Module

(no module changes needed for a function-based route guard)

1
  • When i click on cancel on confirm dialogue its becoms a loop. cofirm appearing again again. Oct 20, 2023 at 10:02
1

I came across this answer on Angular website: https://angular.io/api/router/CanDeactivateFn

Add the following boolean property hasUnsavedChanges to your Component:

export class UserComponent {
  hasUnsavedChanges = true;
}

Then add this function to that component's route in your routing module.

 provideRouter([
      {
        path: 'user/:id',
        component: UserComponent,
        canDeactivate: [(component: UserComponent) => !component.hasUnsavedChanges],
      },
    ]),
1
  • Works great. Instead of a boolean, you can also return a Promise<boolean> if you want. Mar 12 at 14:35
0

All of the various answers above either did not work in ngx17 and/or gave deprecation warnings.

The way HostListerner works seems to have changed subtly and the use of functional guards seems to make it overly complicated to have a single function processing the two notifications and very simply to do the processing in two places.

The following works in 17 and is canonical.

Assuming that your component has a dirty flag:

Component

  import { HostListener } from '@angular/core';
    
  export class MyComponent {

      dirty: boolean = false;

      @HostListener('window:beforeunload', ['$event'])
      canDeactivate(e: BeforeUnloadEvent): void {
        if (this.dirty) e.preventDefault();
      }
  }

Routes

const routes: Routes = [
{ path: '', component:MyComponent, canDeactivate: [
  (component: MyComponent) => component.dirty? confirm(
    'WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.'
  ): true
]}]

... and that is all you need.

-2

The solution was easier than expected, don't use href because this isn't handled by Angular Routing use routerLink directive instead.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.