Routing & Navigation

Angular Child Routes

Child routes nest under a parent path and render into a router-outlet inside the parent component, which is how dashboard-style layouts with a persistent shell are built.

What is Child Routes in Angular?

Child routes nest under a parent path and render into a router-outlet inside the parent component, which is how dashboard-style layouts with a persistent shell are built.

Child Routes example

Nested routes with a default child

TypeScript

{
  path: 'dashboard',
  component: DashboardLayoutComponent,
  children: [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'overview', component: OverviewComponent },
    { path: 'applications', component: ApplicationsComponent },
    { path: 'profile', component: ProfileComponent },
  ],
}

Key points to remember

The parent component needs its own router-outlet for children to appear.
pathMatch: "full" is required on an empty-path redirect, or it matches everything.
The parent stays mounted while children change, preserving its state.

Common mistakes with Child Routes

Omitting pathMatch: "full" on the redirect, causing an infinite redirect loop.
Forgetting the nested router-outlet.

Angular Child Routes— Interview Questions & FAQs

Why does my empty-path redirect loop forever?+

Without pathMatch: "full" the empty path matches every URL prefix, so the redirect fires repeatedly. Add pathMatch: "full" to any redirect from an empty path.