Angular 2 - Alert user before leaving the page if page is touched

Question

We have requirement where we have to alert user if page is touched, if use select different menu application should show alert with Yes or No if user continue to proceed then only redirect should occur else it should fall back to the same page. We have tried with ngOnDestroy but, application is redirecting to next page without showing Alert.

My first approach was:

 ngOnDestroy()
{        
    this.touched = this.eventForm.touched;
    if (this.touched)
        this.display = true;
}

Now I am trying with CanDeactivate guard (refer to this plunker for an example):

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { SidebarComponent } from './shared/sidebar/sidebar.component'; 

@Injectable() 
export class ConfirmDeactivateGuard implements CanDeactivate<SidebarComponent> {
     canDeactivate(target: SidebarComponent) { 
          if (target.hasChanges()) { 
               return window.confirm('Do you really want to cancel?'); 
          } 
          return true; 
      } 
}

Possible duplicate of [Warn user of unsaved changes before leaving page](https://stackoverflow.com/questions/35922071/warn-user-of-unsaved-changes-before-leaving-page) — Maciej Treder, Jul 19 '17 at 15:26
Please check this link and its underlining repo https://rahulrsingh09.github.io/AngularConcepts/#/guard , i have implemented the can decativate guard. — Rahul Singh, Jul 20 '17 at 05:46

score 7 · Answer 1 · edited Jul 20 '17 at 05:41

7

You should use canDeactivate guard

https://angular.io/api/router/CanDeactivate

https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

import { Injectable } from '@angular/core'; 
import { CanDeactivate } from '@angular/router'; 
import { SidebarComponent } from './shared/sidebar/sidebar.component'; 

@Injectable() 
export class ConfirmDeactivateGuard implements CanDeactivate<SidebarComponent> {
     canDeactivate(target: SidebarComponent) { 
          if (target.hasChanges()) { 
               return window.confirm('Do you really want to cancel?'); 
          } 
          return true; 
      } 
}

refer Sample @plnkr http://plnkr.co/edit/sRNxfXsbcWnPU818aZsu?p=preview

edited Jul 20 '17 at 05:41

Pani

125
2
15

answered Jul 19 '17 at 15:15

Maciej Treder

11,866
5
51
74

1

Thanks for your help Maciej, I have referred https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html tried to implement Deactivating Routes, in this CanDeactivateComponent do i need to refer the menu component which I need to disable? i have followed the exact steps and registered ConfirmDeactivateGuard. Do I need to call canDeactivate explicitly? here is my ConfirmDeactivateGuard. same have been register in AppModule. Please assist. – Pani Jul 19 '17 at 16:17
1

import { Injectable } from '@angular/core'; import { CanDeactivate } from '@angular/router'; import { SidebarComponent } from './shared/sidebar/sidebar.component'; @Injectable() export class ConfirmDeactivateGuard implements CanDeactivate { canDeactivate(target: SidebarComponent) { //if (target.hasChanges()) { return window.confirm('Do you really want to cancel?'); //} // return true; } } – Pani Jul 19 '17 at 16:21
As far as I can see, your code should be working. Did you get any issues with it? – Maciej Treder Jul 19 '17 at 16:27

Angular 2 - Alert user before leaving the page if page is touched

1 Answers1