Angular Tutorial: CanActivateChild Guard 🎯

Welcome back to CodeYourCraft! Today, we're diving into a powerful feature of Angular: CanActivateChild. This guard helps secure child routes, ensuring that they can only be activated under specific conditions. Let's get started!

What is CanActivateChild? 📝

CanActivateChild is an Angular guard used to protect nested routes, ensuring they meet certain conditions before they can be activated. Unlike CanActivate, which guards the root route, CanActivateChild safeguards child routes.

Why use CanActivateChild? 💡

Imagine you have a parent route /dashboard with child routes /profile and /settings. You might want to secure the /profile route so that only authenticated users can access it. CanActivateChild allows you to do just that.

Setting up CanActivateChild 🎯

First, let's create a new guard called AuthGuardChild.

bash

ng generate guard AuthGuardChild

In the AuthGuardChild.ts file, implement the CanActivateChild interface:

typescript

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, CanActivateChild } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardChild implements CanActivateChild {
  constructor(private authService: AuthService) {}

  canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree> {
    // Your logic to check if the user is authenticated goes here
    // Return false if the user is not authenticated, otherwise true or navigate to the login page
  }
}

In the auth.service.ts, create a method to check if the user is authenticated:

typescript

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class AuthService implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    // Your logic to check if the user is authenticated goes here
    // Return true if the user is authenticated, otherwise false
  }
}

Using AuthGuardChild 🎯

Now, let's apply AuthGuardChild to a child route in the dashboard.route.ts file:

typescript

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { AuthGuardChild } from '../guards/auth-guard-child.guard';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      {
        path: 'profile',
        canActivateChild: [AuthGuardChild] // Apply AuthGuardChild here
      },
      {
        path: 'settings',
        canActivateChild: [AuthGuardChild] // Apply AuthGuardChild here
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Remember to import AuthGuardChild in your app.module.ts:

typescript

import { AuthGuardChild } from './guards/auth-guard-child.guard';

Putting it all together 🎯

Now you have a basic understanding of CanActivateChild and how to implement it in your Angular application. This guard can help you secure child routes and ensure that users meet certain conditions before accessing them.

Quiz 📝

Stay tuned for more in-depth lessons on Angular at CodeYourCraft! 🚀