Child routes and nested routing in Angular - Mini Project: Build & Apply

Child Routes and Nested Routing in Angular

📖 Scenario: You are building a simple Angular app for a bookstore. The app has a main page showing book categories. When a user clicks a category, they see a list of books in that category. When they click a book, they see details about that book. You will use child routes and nested routing to organize these views.

🎯 Goal: Create Angular routes with child routes to show categories, books in a category, and book details using nested routing.

📋 What You'll Learn

Create a main route for categories

Add child routes for books inside categories

Add nested child routes for book details inside books

Use Angular's RouterModule.forRoot() with the correct route configuration

Use standalone components for each route

💡 Why This Matters

🌍 Real World

Nested routing is common in apps with hierarchical data, like categories and items, user profiles with subpages, or admin dashboards with sections.

💼 Career

Understanding child routes and nested routing is essential for Angular developers building scalable and maintainable web applications.

1

Set up the main routes array

Create a constant called routes that is an array with one route object. The route should have path set to 'categories' and component set to CategoriesComponent.

Angular

# Create the routes array with a route for 'categories' and component CategoriesComponent
# Your code here

Need a hint?

Remember to import Routes from @angular/router and CategoriesComponent.

2

Add child routes for books inside categories

Add a children property to the 'categories' route. It should be an array with one child route object. This child route should have path set to 'books' and component set to BooksComponent.

Angular

import { Routes } from '@angular/router';
import { CategoriesComponent } from './categories.component';
import { BooksComponent } from './books.component';

export const routes: Routes = [
  { path: 'categories', component: CategoriesComponent,
    // Add children array here
  }
];

Need a hint?

Use the children property to nest routes inside the 'categories' route.

3

Add nested child routes for book details inside books

Inside the children array of the 'categories' route, find the 'books' route object. Add a children property to it. This should be an array with one route object. This nested route should have path set to ':id' and component set to BookDetailsComponent.

Angular

import { Routes } from '@angular/router';
import { CategoriesComponent } from './categories.component';
import { BooksComponent } from './books.component';
import { BookDetailsComponent } from './book-details.component';

export const routes: Routes = [
  {
    path: 'categories',
    component: CategoriesComponent,
    children: [
      {
        path: 'books',
        component: BooksComponent,
        // Add nested children array here
      }
    ]
  }
];

Need a hint?

Use children again inside the 'books' route to nest the book details route.

4

Configure RouterModule with the routes

Import RouterModule from @angular/router and export a constant called AppRoutingModule using RouterModule.forRoot(routes).

Angular

import { Routes, RouterModule } from '@angular/router';
import { CategoriesComponent } from './categories.component';
import { BooksComponent } from './books.component';
import { BookDetailsComponent } from './book-details.component';

export const routes: Routes = [
  {
    path: 'categories',
    component: CategoriesComponent,
    children: [
      {
        path: 'books',
        component: BooksComponent,
        children: [
          { path: ':id', component: BookDetailsComponent }
        ]
      }
    ]
  }
];

// Export AppRoutingModule here
# Your code here

Need a hint?

Use @NgModule to create AppRoutingModule that imports and exports RouterModule.