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

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
  }
];

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
      }
    ]
  }
];

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

Hint

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

Practice

1. What is the main purpose of child routes in Angular routing?

easy

A. To replace the main router outlet completely

B. To disable navigation between pages

C. To load components without URLs

D. To nest pages inside other pages for better organization

Solution

1. Step 1: Understand child routes concept

   Child routes allow nesting routes inside a parent route to organize pages hierarchically.

2. Step 2: Compare options with concept

   Only To nest pages inside other pages for better organization correctly describes this purpose; others are incorrect or unrelated.

3. Final Answer:

   To nest pages inside other pages for better organization -> Option D

4. Quick Check:

   Child routes = Nested pages [OK]

Hint: Child routes organize nested pages inside parents [OK]

Common Mistakes:

• Thinking child routes replace main router outlet
• Believing child routes work without URLs
• Confusing child routes with disabling navigation

2. Which syntax correctly defines a child route in Angular's RouterModule?

easy

A. { path: 'parent', children: ChildComponent }

B. { path: 'parent/child', component: ChildComponent }

C. { path: 'parent', children: [{ path: 'child', component: ChildComponent }] }

D. { path: 'parent', component: ParentComponent, child: [{ path: 'child' }] }

Solution

1. Step 1: Recall child route syntax

   Child routes are defined inside a 'children' array property of a route object.

2. Step 2: Match syntax with options

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } correctly uses 'children' with an array of child route objects; others misuse properties or structure.

3. Final Answer:

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } -> Option C

4. Quick Check:

   Child routes use 'children' array [OK]

Hint: Child routes go inside 'children' array in route config [OK]

Common Mistakes:

• Using 'child' instead of 'children'
• Defining child path as 'parent/child' in one route
• Assigning component directly to 'children'

3. Given this route config:

{ path: 'dashboard', component: DashboardComponent, children: [ { path: 'stats', component: StatsComponent } ] }

What happens when navigating to /dashboard/stats?

medium

A. Only StatsComponent loads, DashboardComponent is ignored

B. DashboardComponent loads with StatsComponent displayed inside its router-outlet

C. DashboardComponent loads but StatsComponent does not display

D. Navigation fails with an error

Solution

1. Step 1: Understand nested route rendering

   Child routes render their components inside the parent's <router-outlet>.

2. Step 2: Apply to given URL

   At /dashboard/stats, DashboardComponent loads first, then StatsComponent loads inside its router-outlet.

3. Final Answer:

   DashboardComponent loads with StatsComponent displayed inside its router-outlet -> Option B

4. Quick Check:

   Child route renders inside parent component [OK]

Hint: Child shows inside parent's router-outlet on nested URL [OK]

Common Mistakes:

• Expecting child component to replace parent
• Forgetting to add router-outlet in parent
• Assuming navigation error without cause

4. Identify the error in this route config:

{ path: 'home', component: HomeComponent, children: { path: 'profile', component: ProfileComponent } }

medium

A. 'children' should be an array, not an object

B. Missing component for 'home' route

C. 'path' cannot be used inside children

D. ProfileComponent must be declared in AppModule

Solution

1. Step 1: Check 'children' property type

   The 'children' property must be an array of route objects, not a single object.

2. Step 2: Verify given config

   Here, 'children' is incorrectly assigned an object instead of an array.

3. Final Answer:

   'children' should be an array, not an object -> Option A

4. Quick Check:

   'children' = array of routes [OK]

Hint: 'children' must always be an array, not a single object [OK]

Common Mistakes:

• Using object instead of array for children
• Confusing 'path' usage inside children
• Assuming missing component causes this error

5. You want to create a nested route where /settings loads SettingsComponent and /settings/profile loads ProfileComponent inside it. Which setup is correct?

hard

A. Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template

B. Define { path: 'settings/profile', component: ProfileComponent } only, no children needed

C. Define { path: 'settings', component: ProfileComponent, children: [{ path: 'profile', component: SettingsComponent }] }

D. Define { path: 'settings', component: SettingsComponent } and load ProfileComponent manually inside SettingsComponent without routing

Solution

1. Step 1: Setup nested routes properly

   To nest ProfileComponent inside SettingsComponent, use 'children' array with ProfileComponent route.

2. Step 2: Ensure parent template has router-outlet

   SettingsComponent template must include <router-outlet> to display child routes.

3. Final Answer:

   Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template -> Option A

4. Quick Check:

   Nested route + router-outlet = correct setup [OK]

Hint: Parent needs router-outlet and children array for nested routes [OK]

Common Mistakes:

• Defining nested path as one string without children
• Swapping parent and child components
• Not adding router-outlet in parent component