Angular CanActivateChild Example

The Angular CanActivateChild guard runs before we navigate to a child route. In this tutorial, we will learn what is CanActivateChild guard is and how to use it to protect the child routes. We will build a simple Angular CanActivateChild example app to show you how to use it in the real application.

What is CanActivateChild Guard

The CanActivatechild guard is very similar to CanActivateGuard. We apply this guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child routes. This allows us to check some conditions and decide whether to proceed with the navigation or cancel it.

Difference between CanActivate & CanActivateChild

Consider the following routes.

The ProductComponent displays the list of products. We have attached the canActivate guard to the product route. The canActivate guard blocks access to the route, if the user is not logged in. This guard protects both the product route and all its children.

Now, consider the case where we want all users to view the ProductComponent, but only the Admin user can view any of its child routes

We can create another guard ProductGuardService that implements the canActivate guard and attach it to each of those child routes as shown below.

Another way is to use the CanActivateChild guard and attach it to the product route as shown below. When Angular sees a canActivateChild guard attached to the parent route, it invokes it every time the user tries to navigate to the child route. Hence instead of attaching Guard service to every child, you can attach it to the parent route.

How to Create CanActivateChild Guard

Just like all other Angular Guards, we need to create an Angular Service. The service must import & implement the CanActivateChild Interface. The Interface is defined in the @angular/router module. The Interface has one method i.e. canActivateChild. The details of the CanActivateChild interface are 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 . It can return these values either as an observable or a promise or as a simple Boolean value.

If all guards return true, navigation will continue.

If any guards return false, navigation will be cancelled.

If any 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 canActivateChild guard is as follows

Angular CanActivateChild Example

In our example application, the HomeComponent & ContactComponent are not protected and can be accessed by any user.

The user must log in to the system to access the ProductComponent..

The ProdudctEditComponent, and ProductViewComponets are child components of the ProductComponent

We also need  LoginComponent to handle the user login.




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. isAdminUser() method returns true if the user is logged in with the user name “Admin”.

Product Component

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.





We have Product add, edit & view components.




Other Components





CanActivateChild Guard

Next, we will build CanActivate guard, which will check whether the users are logged in or not. The users are redirected to the login page if they are not logged in.

Also, CanActivateChild guard, which checks whether the user is Admin User. Only the Admin Users are allowed to navigate to the ProductEditComponent & ProductViewComponent.


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

The AuthGuardService implements both CanActivate & CanActivateChild interface

Inject the AuthServce in the constructor of the Guard

In the CanActivate method, we will redirect the user to 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.

While in CanActivateChild method, we just check if the user is Admin, then we will return true else return false

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



We apply both guards on the product route. The canActivate guards protect the product route and canActivateChild protects all its child routes.

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

Angular CanActivateChilld Guard Example

2 thoughts on “Angular CanActivateChild Example”

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