Thuta Learning
AdvancedWeb Developmentintermediate

Child Routes

Relax. We'll talk through this in plain words — no textbook voice.

Child Routes are used to build a nested routing structure.

typescript
// app-routing.module.ts
const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: OverviewComponent },
      { path: 'stats', component: StatsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

// dashboard.component.html
<div class="dashboard">
  <nav>
    <a routerLink="overview">Overview</a>
    <a routerLink="stats">Statistics</a>
    <a routerLink="settings">Settings</a>
  </nav>
  
  <!-- Child routes render here -->
  <router-outlet></router-outlet>
</div>
You should see
(Nested routes like /dashboard/overview and /dashboard/stats will work)
Child Routes | Thuta Learning