Angular Child Routes Tutorial 🎯

Welcome to our comprehensive guide on Angular Child Routes! In this lesson, we'll delve into the world of nested routes, a powerful feature that allows you to organize your application's routes more effectively. Let's get started!

Understanding Child Routes 📝

Child routes are a way to nest routes within other routes. They are particularly useful when you want to structure your application in a hierarchical manner, making it easier to manage complex routing configurations.

Why Use Child Routes? 💡

Organize your routes: Child routes help keep your routing code clean and manageable, especially when dealing with multiple layers of navigation.
Improve navigation: Nested routes provide a more intuitive and structured navigation experience for users.
Reusable components: Child routes allow you to reuse existing components across different parts of your application.

Setting Up Child Routes ✅

To create child routes, we'll first need a parent component and a child component. Let's create a simple parent component called HeroesList and a child component called HeroDetail.

HeroesList Component

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-heroes-list',
  template: `
    <h2>List of Heroes</h2>
    <router-outlet></router-outlet> // This is where child routes will be displayed
  `,
})
export class HeroesListComponent { }

HeroDetail Component

typescript

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-detail',
  template: `
    <h2>Hero Detail</h2>
    <p>This is the detail view for a hero.</p>
  `,
})
export class HeroDetailComponent { }

Creating Child Routes

Now, let's define our child routes in the HeroesListComponent's routing module.

typescript

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroesListComponent } from './heroes-list.component';
import { HeroDetailComponent } from './hero-detail.component';

const routes: Routes = [
  { path: '', component: HeroesListComponent },
  {
    path: ':id', // This route will match any id value
    component: HeroDetailComponent, // This component will be displayed when the route is matched
  },
];

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

In the example above, we've defined a child route that will match any URL with an id parameter. When this route is matched, the HeroDetailComponent will be displayed.

Putting It All Together ✅

Now that we've defined our child route, let's use it in the parent routing module.

typescript

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeroesListComponent } from './heroes-list.component';
import { HeroesListRoutingModule } from './heroes-list-routing.module';

const routes: Routes = [
  { path: 'heroes', component: HeroesListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes), HeroesListRoutingModule],
  exports: [RouterModule],
})
export class AppRoutingModule { }

In the parent routing module, we've added our child routing module and defined a route for the HeroesListComponent.

Testing Our Setup 💡

With our setup complete, let's test it out. Start your Angular application and navigate to /heroes. You should see the HeroesListComponent displayed. Now, navigate to /heroes/1 (or any other id), and you should see the HeroDetailComponent displayed with the id parameter passed in.

Angular Child Routes Tutorial 🎯

Angular Child Routes Tutorial 🎯

Understanding Child Routes 📝

Why Use Child Routes? 💡

Setting Up Child Routes ✅

HeroesList Component

HeroDetail Component

Creating Child Routes

Putting It All Together ✅

Testing Our Setup 💡

Quiz 🎯