Angular CanActivate Guard Example

The Angular CanActivate guard runs before we navigate to a route allowing us to cancel the navigation. In this tutorial, we will learn what is CanActivate guard is and how to use it to protect the route. We will build a simple CanActivate Example app to show you how to use it in real application

What is CanActivate Guard

The Angular CanActivate guard decides, if a route can be activated ( or component gets rendered). We use this guard, when we want to check on some condition, before activating the component or showing it to the user. This allows us to cancel the navigation.

Use cases for the CanActivate Guard

  • Checking if a user has logged in
  • Checking if a user has permission

One of the use case of this guard is to check if the user has logged in to the system. If user has not logged in, then the guard can redirect him to login page.

How to use CanActivate Guard

First, we need to create a Angular Service.

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

The method gets the instance of the ActivatedRouteSnapshot & 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 canActivate guard.

If all guards returns true, navigation to the route will continue.

If any one of the guard returns false, navigation will be cancelled.

If any one of the guard returns a UrlTree, current navigation will be cancelled and a new navigation will be kicked off to the UrlTree returned from the guard.

The example of canActivate guard is as follows

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

CanActivate guard Example

In our example application, we will create three components. The HomeComponent & ContactComponent are not protected and can be accessed any user. The user must log in into the system to access the ProductComponent..We also need a LoginComponent to handle the user login.


The following is the code for LoginComponent and associated AuthService

[tabby title=”login.component.ts”]

[tabby title=”login.component.html”]

[tabby title=”auth.service.ts”]


The AuthService checks whether the user is allowed to login. It has the method to login & logout the users. Our implementation of the login method does not check for anything. It just marks the user as logged in.


The ProductComponent is our protected component. Only the logged in users can access this. This component displays the list of Products, which it gets from the ProductService.

[tabby title=”product.component.ts”]

[tabby title=”product.component.html”]

[tabby title=”product.service.ts”]

[tabby title=”product.ts”]


Other Component

[tabby title=”app.component.ts”]

[tabby title=”app.component.html”]

[tabby title=”home.component.ts”]

[tabby title=”contact.component.ts”]


CanActivate Guard

Finally, we build a CanActivate guard, which will check whether the users are logged in or not. If users are not logged in, then they are redirected to the login page.

[tabby title=”auth-guard.service.ts”]


First, we import the CanActivate from the @angular/router module.

The AuthGuardService implements the CanActivate interface

Inject the AuthServce in the constructor of the Guard

In the CanActivate method, we will redirect the user the login page, if the user is not logged in. To cancel the navigation ,we must either return false or urlTree as shown in the example above.

Next, we will update the route definition and use the guard in all the routes, which we want to protect

[tabby title=”app.routes.ts”]


Finally, register the service in the app.module.

[tabby title=”app.module.ts”]


Run the app. You can access the Product page only if you login as shown in the image below.

Angular CanActivate guard Example


CanActivate Interface

14 thoughts on “Angular CanActivate Guard Example”

  1. Hi,
    I am facing issue like cannot access inside canActivate() method I am not able to see console values. initialized authguardservice in providers while debug found that its not calling inside canActivate method can you please help in this issue.

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return true;

  2. Hi,
    I am facing this issue like in authguardservice file inside canActivate method console is not printing. I have added authguardservice in providers…
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return true;

  3. Hi,
    How do I apply this algorithm to hide or show component without navigate anywhere. In the other words, I have index page and 2 components. User will be validated in “A” component. If validation is pass, He will be seeing “B” component… should I just modify this line: { path: ‘product’, component: ProductComponent, canActivate : [AuthGuardService] },

    Thank you

  4. Hello if I want to give access module wise then how to do so?

    I mean to say if you have component A ,component B and component C

    And I have user harry which has access rights of A and B.

    Then I have jack who has access rights of B and C

    How can we achieve that?

    1. Setup a role for each component. You can use route data to store role [ Refer Pass data to route]

      Load the user role when user logs in.

      Match the user role with the component role and in the CanActivate Guard.

      Google “Role Based Authorization in Angular”, you will get several articles

Leave a Comment

Your email address will not be published. Required fields are marked *

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

Scroll to Top