Angular CanActivate vs CanDeactivate

Asked on July 28, 2018
What is difference between Angular CanActivate and CanDeactivate route guard and how to use them?

Replied on July 28, 2018
Angular CanActivate and CanDeactivate are the route guards in Angular routing. CanActivate decides if a route can be activated. CanDeactivate decides if route can deactivated. Find in details.


CanActivate is an Angular interface. It guards a link and allow to access conditionally such as in user authentication application. We can enter into application only after login. So the application links will be guarded by CanActivate and will be accessible only after login. Find the sample code.

1. Create a service implementing CanActivate

export class AuthGuardService implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
    console.log('Url:'+ url);
    if (this.authService.isUserLoggedIn()) {
        return true;
        this.router.navigate([ this.authService.getLoginUrl() ]);
    return false;

2. In route configuration, configure the AuthGuardService service using canActivate property.

   path: 'home',
   component: DashboardLayoutComponent,
   canActivate: [ AuthGuardService ]

Now /home path and its children path will not be allowed to be activated until canActivate() of AuthGuardService returns true.

Find the reference link.


CanDeactivate is an interface that is implemented by a class to create a guard which decides if a route can be deactivated. The guard can be added to any component route using canDeactivate attribute of Angular Route interface. Any component which needs to use CanDeactivate guard, has to define canDeactivate method and that will be called by guard class that has been created implementing CanDeactivate interface.
CanDeactivate guard can be used in the scenario, for example, suppose a user is changing form data and before saving, user tries to navigate away. In this scenario we can use CanDeactivate guard which will deactivate the route and open a Dialog Box to take user confirmation.

1.  First we will create an interface that will declare canDeactivate method and using this interface we will create a service that will act as CanDeactivate guard. This service will define canDeactivate method. Now find our CanDeactivate guard.

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

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate,
           route: ActivatedRouteSnapshot,
           state: RouterStateSnapshot) {

     let url: string = state.url;
     console.log('Url: '+ url);

     return component.canDeactivate ? component.canDeactivate() : true;

2.  In route configuration, configure the CanDeactivateGuard service using canDeactivate property.
    path: ':person',
    component: PersonEditComponent,
    canDeactivate: [CanDeactivateGuard]

Find the reference link.

Write Answer

©2024 | Privacy Policy | Contact Us