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 tris to navigate to any of its child route. This allows us check some condition 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 product. We have attached the canActivate guard to the product route. The canActivate guard blocks the access to the route, if the user is not logged in. This guard protect 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 which 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 navigates to the child route. Hence instead of attaching Guard service 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 value either as a observable or a promise or as a simple Boolean value.

If all guards return true, navigation will continue.

If any guard returns 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 any user.

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

The ProdudctEditComponent, ProductViewComponets are child components of the ProductComponent

We also need a LoginComponent to handle the user login.

login.component.ts

login.component.html

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. 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.

product.component.ts

product.component.html

product.service.ts

product.ts

We have Product add, edit & view components.

product-add.component.ts

product-edit.component.ts

product-view.component.ts

Other Components

app.component.ts

app.component.html

home.component.ts

contact.component.ts

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.

auth-guard.service.ts

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 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, the 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

app.routes.ts

app.module.ts

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

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

Angular CanActivateChilld Guard Example

1 thought on “Angular CanActivateChild Example”

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