The difference between the canActivate and canActivateChild guards

profile
Tim Deschryver
timdeschryver.dev

canActivate link

format_quote

Interface that a class can implement to be a guard deciding if a route can be activated. 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 canActivate guard decides if route can be navigated to, which results in the creation of the route's component.

To implement the guard, create a new class and implement the CanActivate interface. The interface can return a boolean (as a boolean, a promise, or an Observable) or the guard can navigate to another route. If it returns a truthy value, the component will be created, otherwise it will not and the navigation gets canceled.

To guard a route, add the guard to the canActivate property while declaring the routes in the application.

canActivateChild link

format_quote

Interface that a class can implement to be a guard deciding if a child route can be activated. 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 canActivateChild guard, serves the same purpose as the canActivate guard and can prevent a route navigation. The API to create the guard is the same, but for the canActivateChild guard you have to implement the CanActivateChild interface.

To add the guard to the routes, use the canActivateChild property. Doing this will guard all the children's routes.

The differences link

Nice to knows link

Example application link

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post on

Twitter LinkedIn