Guard against navigating away when there are unsaved changes

unsaved-changes-guard.ts

import {CanDeactivate, Router} from '@angular/router';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

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

@Injectable()
export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {

    constructor(private dialog: MatDialog) {}

    canDeactivate(component: CanComponentDeactivate) {
        // Allow navigation if the component says that it is OK or it doesn't have a canDeactivate function
        if (!component.canDeactivate || component.canDeactivate()) {
            return true;
        }

        return Observable.create((observer: Observer<boolean>) => {
            // UnsavedChangesDialog defined somewhere else and imported above
            let dialogRef = this.dialog.open(UnsavedChangesDialog, {
                data: {
                  message: 'You have unsaved changes. Are you sure you want to leave this page?'
                }
            });
            
            dialogRef.afterClosed().subscribe(result => {
                observer.next(result);
                observer.complete();
              }, (error) => {
                observer.next(false);
                observer.complete();
              }
            });
        });
    }
}

thank you so much it works super...

I think this will only work when the canDeactivate method returns a boolean. When it returns a promise or observable, the check in line 18 (component.canDeactivate()) will always be truthy and thus always result in the return true.

@samhDV yeah seems to be correct.