CanDeactivate

The canDeactivate guard is different from the rest. Its main purpose is not to check permissions, but to ask for confirmation.

To illustrate this let's change the application to ask for confirmation when the user closes the compose dialog with unsaved changes:

[
   {
     path: 'compose',
     component: ComposeCmp,
     canDeactivate: [SaveChangesGuard]
     outlet: 'popup'
   }
 ]

Where SaveChangesGuard is defined as follows:

class SaveChangesGuard implements CanDeactivate<ComposeCmp> {
   constructor(private dialogs: Dialogs) {}
 
   canDeactivate(component: ComposeCmp, route: ActivatedRouteSnapshot,
                 state: RouterStateSnapshot): Promise<boolean> {
     if (component.unsavedChanges) {
       return this.dialogs.unsavedChangesConfirmationDialog();
     } else {
       return Promise.resolve(true);
     }
   }
 }

The SaveChangesGuard class asks the user to confirm...