Skip to content

Instantly share code, notes, and snippets.

@Zephyrante

Zephyrante/unsaved-changes-guard.ts

Forked from Splaktar/unsaved-changes-guard.ts
Created November 15, 2019 08:01
Show Gist options
  • Save Zephyrante/38a7d0565ff609956d1c981cff23c9d3 to your computer and use it in GitHub Desktop.
Save Zephyrante/38a7d0565ff609956d1c981cff23c9d3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @Splaktar Splaktar revised this gist Jan 23, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions unsaved-changes-guard.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -20,6 +20,7 @@ export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate
    }

    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?'
  2. @Splaktar Splaktar revised this gist Jan 23, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions unsaved-changes-guard.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -14,8 +14,8 @@ export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate
    constructor(private dialog: MatDialog) {}

    canDeactivate(component: CanComponentDeactivate) {
    // Allow navigation if the component says that it is OK
    if (!component.canDeactivate()) {
    // 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;
    }

  3. @Splaktar Splaktar revised this gist Jan 23, 2018. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions unsaved-changes-guard.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -4,12 +4,16 @@ 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<any> {
    export class UnsavedChangesGuard implements CanDeactivate<CanComponentDeactivate> {

    constructor(private dialog: MatDialog) {}

    canDeactivate(component: any) {
    canDeactivate(component: CanComponentDeactivate) {
    // Allow navigation if the component says that it is OK
    if (!component.canDeactivate()) {
    return true;
  4. @Splaktar Splaktar revised this gist Jan 23, 2018. 1 changed file with 19 additions and 18 deletions.
    37 changes: 19 additions & 18 deletions unsaved-changes-guard.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,34 +1,35 @@
    import {CanDeactivate, Router} from '@angular/router';
    import {Injectable} from '@angular/core';
    import {ConfirmationService} from 'primeng/components/common/api';
    import {FirstViewComponent} from '../first-view/first-view.component';
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs';
    import {Observer} from 'rxjs/Observer';
    import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

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

    constructor(private confirmationService: ConfirmationService) {
    }
    constructor(private dialog: MatDialog) {}

    canDeactivate(component: FirstViewComponent) {
    // Allow navigation if the form is unchanged
    if (!component.dirty) {
    canDeactivate(component: any) {
    // Allow navigation if the component says that it is OK
    if (!component.canDeactivate()) {
    return true;
    }

    return Observable.create((observer: Observer<boolean>) => {
    this.confirmationService.confirm({
    message: 'You have unsaved changes. Are you sure you want to leave this page?',
    accept: () => {
    observer.next(true);
    observer.complete();
    },
    reject: () => {
    observer.next(false);
    observer.complete();
    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();
    }
    });
    });
    }
    }
  5. @Splaktar Splaktar created this gist Jan 23, 2018.
    34 changes: 34 additions & 0 deletions unsaved-changes-guard.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    import {CanDeactivate, Router} from '@angular/router';
    import {Injectable} from '@angular/core';
    import {ConfirmationService} from 'primeng/components/common/api';
    import {FirstViewComponent} from '../first-view/first-view.component';
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs';

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

    constructor(private confirmationService: ConfirmationService) {
    }

    canDeactivate(component: FirstViewComponent) {
    // Allow navigation if the form is unchanged
    if (!component.dirty) {
    return true;
    }

    return Observable.create((observer: Observer<boolean>) => {
    this.confirmationService.confirm({
    message: 'You have unsaved changes. Are you sure you want to leave this page?',
    accept: () => {
    observer.next(true);
    observer.complete();
    },
    reject: () => {
    observer.next(false);
    observer.complete();
    }
    });
    });
    }
    }