4

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; 
      } 
}
2

1 Answer 1

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

3
  • 1
    Thanks for your help Maciej, I have referred 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, 2017 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<SidebarComponent> { canDeactivate(target: SidebarComponent) { //if (target.hasChanges()) { return window.confirm('Do you really want to cancel?'); //} // return true; } }
    – Pani
    Jul 19, 2017 at 16:21
  • As far as I can see, your code should be working. Did you get any issues with it? Jul 19, 2017 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.