0

I see every day that some app has a function that when you are on a page and you are filling, for example, a form and when you tried and click somewhere else for example in nav menu or even leave the page and you have unsafe change they ask the user if he wants to leave the page, I would really appreciate if someone can provide me an example of how can this be implemented in Angular, I am not sure if this is a front or backend job in backend I am working with java. Thanks a lot, each idea count :D.

Ilia Tapia
  • 629
  • 3
  • 10
  • 23

3 Answers3

1

You can use canDeactivate guard for every component,

First you have to add this service file "deactivate-guard.service.ts":

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

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

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

  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

then you have to provide in the app module:

providers: [
    DeactivateGuardService
  ]

now in the component you want to protect, add the function:

export class ExampleComponent {
    loading: boolean = false;
     @ViewChild('exampleForm') exampleForm: NgForm;

     canDeactivate(): Observable<boolean> | boolean {

        if (this.loading|| this.exampleForm.dirty) {

           return this.confirmBox('Discard Unsaved Changes?');
       }
       return true;
     }

    confirmBox(message?: string): Observable<boolean> {
       const confirmation = window.confirm(message || 'Are you sure?');

       return of(confirmation);
   };


}

Add the directive to the component in the routing module:

@NgModule({
  imports: [
    RouterModule.forRoot([
      { 
      path: 'example', 
      canDeactivate: [DeactivateGuardService],
      component: ExampleComponent 
    }
    ])
  ]
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
1

You can use the canDeactivate guard to check a page leave and display the warning message you wish to display something like this

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

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate>{
    canDeactivate(component: CanComponentDeactivate) {
        return component.canDeactivate ? component.canDeactivate() : true;
    }
}

include set the can activate guard to the route like this

{ path: 'sample-path', component: SampleComponent, canDeactivate: [CanDeactivateGuard] },

and the canDeactivate method to the component

canDeactivate() {
        if (this.formIsIncomplete > 0) {
            let result: boolean = window.confirm("You have unsaved Changes");
            return result;
        }
        return true;
    }
Hana Wujira
  • 870
  • 7
  • 17
1

it may helpful for you to make alert https://stackblitz.com/edit/angular-confirmation-dialog

Pavan Nagadiya
  • 652
  • 4
  • 10