Chapter 6.3☕ 15 min read

Child Routes & Nested Navigation

Nest routes inside other routes to build complex layouts with nested navigation.

01What are Child Routes

Child routes are routes defined inside a parent route. The parent component has its OWN <router-outlet> where child components render.

"Child routes = ghar ke andar kamre — parent ghar hai, child kamra hai."

In a typical dashboard layout:

/dashboard — DashboardComponent (parent with sidebar + outlet)
/dashboard/orders — OrdersComponent (renders inside dashboard's outlet)
/dashboard/profile — ProfileComponent (renders inside dashboard's outlet)

The parent route acts as a layout container — its template provides the common UI (sidebar, header) and the child route fills the outlet.

02Defining Child Routes

Child routes are defined using the children property in the route config.

const routes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
  children: [
    { path: '', component: DashboardHomeComponent },
    { path: 'orders', component: OrdersComponent },
    { path: 'profile', component: ProfileComponent },
  ]
}];

IMPORTANT: DashboardComponent MUST have a <router-outlet> in its template. Children don't render in the app's main outlet — they render in the parent's outlet.

"Parent ke andar router-outlet lagao — child wahan aayega."

03Nested <router-outlet> Structure

With nested routes, you end up with multiple <router-outlet> elements at different levels.

<!-- app.component.html -->
<header>...</header>
<router-outlet />  <!-- Level 1: App-level pages -->
<footer>...</footer>

<!-- dashboard.component.html -->
<div class="dashboard-layout">
  <aside class="sidebar">...</aside>
  <main>
    <router-outlet />  <!-- Level 2: Dashboard children -->
  </main>
</div>

"Jitne router-outlets utne levels — matryoshka dolls jaisa."

Level 1 outlet renders top-level pages (Dashboard, Menu, About). Level 2 outlet (inside Dashboard) renders child pages (Orders, Profile). You can nest as many levels as you need.

04Relative Navigation

When navigating between child routes, you can use relative paths instead of absolute ones.

// From OrdersComponent (/dashboard/orders)
// Navigate to profile sibling (/dashboard/profile)

import { inject } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

export class OrdersComponent {
  private router = inject(Router);
  private route = inject(ActivatedRoute);

  goToProfile() {
    // Relative navigation — '..' means go up one level
    this.router.navigate(['../profile'], { relativeTo: this.route });
  }

  goHome() {
    // Absolute navigation — always from root
    this.router.navigate(['/dashboard']);
  }
}

"Relative = directions — left se ya seedha, relative to where you are."

../ goes up one level (from /dashboard/orders to /dashboard). ./ stays at the current level. Without relativeTo, paths are absolute (from root).

05Empty Child Route

An empty child route (path: '') defines what shows when the parent URL has no child path.

{ path: 'dashboard', component: DashboardComponent, children: [
    { path: '', component: DashboardHomeComponent },   // /dashboard
    { path: 'orders', component: OrdersComponent },      // /dashboard/orders
  ]
}

"Empty path = default kamra — jab specific kamra nahi bataya."

Without the empty path child, navigating to /dashboard shows the DashboardComponent with an EMPTY child outlet — a blank area where children should appear. Always include a default child route for parent layouts.

Key Takeaways

✅ Child routes nest inside parent routes using the children: [] property
✅ Parent component MUST have its own for children to render
✅ Multiple router-outlets create nesting levels: app outlet > dashboard outlet > ...
✅ Relative navigation (../) navigates relative to current route, not from root
✅ Empty child route (path: '') provides default content when no child path specified

Previous6.2 — Route Parameters 📋 All Chapters Next Chapter6.4 — Lazy Loading →