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)