Angular CanDeactivate Guard

The Angular CanDeactivate Guard determines whether we can navigate away from a route. In this tutorial, we will learn what is CanDeactivate Guard is and how to use it with a simple CanDeactivate example application.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

What is CanDeactivate Guard

The Angular CanDeactivate guard is called, whenever we navigate away from the route before the current component gets deactivated.

The best use case for CanDectivate guard is the data entry component. The user may have filled the data entry and tries to leave that component without saving his work. The CanDeactivate guard gives us a chance to warn the user that he has not saved his work and give him a chance to cancel the navigation.

How to use CanDeactivate Guard

First, we need to create an Angular Service.

The service must import & implement the CanDeactivate Interface. This Interface is defined in the @angular/router module. The Interface has one method i.e. canDeactivate. We need to implement it in our Service. The details of the CanDeactivate interface is as shown below.

The method gets the instance of the component being deactivated as the first argument.

The method also gets the instance of the ActivatedRouteSnapshot, the current state of the  RouterStateSnapshot, next state of the RouterStateSnapshot. We can use this to get access to the route parameter, query parameter, etc.

The guard must return true/false or a UrlTree . The return value can be in the form of observable or a promise or a simple boolean value.

A route can have more than one canDeactivate guard.

If all guards return true, the component will get deactivated and you will navigate to the next route.

If anyone of the guard returns false, navigation will be canceled and you will stay in the same route/component.

If any one of the guards returns a UrlTree, current navigation will be canceled and new navigation will be kicked off to the UrlTree returned from the guard. The current component will get deactivated.

The example of canDeactivate the guard is as follows

CanDeactivate Example

First create a component, with a method canExit, which returns a boolean. In the canExit method, you can check if there are any unsaved data, etc. If Yes, then ask for confirmation whether the user wants to leave or not. Return true to exit the component else return false to stay in the same component.

Next, create a guard service, which implements the CanDeactivate Interface.

Update the route definition with the canDeactivate guard as shown below. You can apply more than one guard to a route and a route can have more than one guard

The guard created in the above example is specific to RegisterComponent. We can create a general-purpose DeactivateGuard Service and use it everywhere, by making use of the interface

General Purpose DeactivateGuard Service

First Define an Interface IDeactivateComponent as shown below

Next, Open the component, where you wish to implement the Deactivate Guard. In our case it is RegisterComponent. Make the component implement the IDeactivateComponent as shown below. Implement the canExit method

Now, in the guard service, use the IDeactivateComponent interface instead of the actual component.

Complete Source Code

Summary

In this tutorial, we learned how to make use of CanDeactivate Guard. This guard is used to stop the user from accidentally leaving the route, before saving their work.

1 thought on “Angular CanDeactivate Guard”

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top