Angular Router 13: Can Activate Child Guard

Yuvaraj S
1 min readDec 21, 2022

--

In our Previous Blog we learn’t about Can Deactivate Guard. Please Find the link for the previous blog.

Angular Router 12: Can Deactivate Guard

CanActivateChild Guard

Can ActivateChild Guard is used to take a control of the child routes of the angular.

Starting I have created 4 components, namely

  • About component : Will be our parent Route
  • navone component: ChildRoute of about component
  • navtwo component: ChildRoute of about component
  • navthree component: ChildRoute of about component

Firstly we will navigate to about component, from about component we will try to navigate navone, navtwo, navthree component. The Live Code is attached at the end of the blog.

Creating CanACtivateChild Guard

We create a guard that implements canActivateChild.

activate-child.guard.ts

The guard will be attached to our parent route in routing.module.ts by adding canActivateChild key. It takes an array we can have as many as guards.

In our guard, canActivateChild method returns true it allows routing to its child. If not It won’t allow it.

Find the Live Working Code here,
https://stackblitz.com/edit/angular-can-activate-child

In Next Blog

Angular Router 14: Resolve guard

— — — — — — — — — End Of Lecture — — — — — — —

Check All lessons of Angular Intermediate Lessons

https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b

--

--

Yuvaraj S

Frontend Developer with 6years of experience, I write blogs that are [Easy words + Ground Level Code + Live Working Link]. Angular | React | Javascript | CSS