Angular Child Routes

What Are Child Routes?

A child route is a route nested inside another route's children array. The parent route typically renders a layout component containing its own <router-outlet>, where the matched child route's component renders.

This pattern is common for dashboards, settings pages, and any UI with a persistent shell (navigation, header) surrounding content that changes based on the URL.

export const routes: Routes = [
  {
    path: 'settings',
    component: SettingsLayoutComponent,
    children: [
      { path: 'profile', component: ProfileSettingsComponent },
      { path: 'security', component: SecuritySettingsComponent },
      { path: '', redirectTo: 'profile', pathMatch: 'full' },
    ],
  },
];

Visiting /settings/security renders SettingsLayoutComponent, which itself renders SecuritySettingsComponent inside its own <router-outlet>.

Child Route Syntax

{
  path: 'parent',
  component: ParentLayoutComponent,
  children: [
    { path: 'child-a', component: ChildAComponent },
    { path: 'child-b', component: ChildBComponent },
  ],
}

• Child route paths are relative to the parent path, settings/profile, not an absolute /profile.
• The parent's component template needs its own <router-outlet> for children to render into.
• An empty-path child with redirectTo provides a sensible default when only the parent path is visited.
• Nested router-outlets can go arbitrarily deep for multi-level layouts.

Child Routes Cheatsheet

Key patterns for building nested, layout-based routing.

Building a Layout Component for Children

The parent's component acts as a shell: it renders shared UI (like tabs or a sidebar) plus a <router-outlet> for whichever child route is currently active.

// settings-layout.component.html
<nav class="settings-tabs">
  <a routerLink="profile" routerLinkActive="active">Profile</a>
  <a routerLink="security" routerLinkActive="active">Security</a>
</nav>

<router-outlet></router-outlet>

The relative links (profile, security, no leading slash) resolve relative to the parent's own path segment.

Relative Navigation From Code

When navigating programmatically between sibling child routes, use relativeTo with the current ActivatedRoute instead of hardcoding the full absolute path, keeping the navigation resilient if the parent path ever changes.

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

  goToSecurity() {
    this.router.navigate(['security'], { relativeTo: this.route });
  }
}

Providing a Default Child Route

Without a default, visiting just /settings (with no child segment) would render the layout with an empty outlet. An empty-path redirect child route fixes this by sending users to a sensible default tab.

children: [
  { path: '', redirectTo: 'profile', pathMatch: 'full' },
  { path: 'profile', component: ProfileSettingsComponent },
  { path: 'security', component: SecuritySettingsComponent },
]

Common Mistakes

• Forgetting to add a <router-outlet> inside the parent layout's own template.
• Using absolute paths (with a leading slash) for links meant to be relative to the parent route.
• Omitting a default empty-path child redirect, leaving an empty outlet when only the parent path is visited.
• Deeply nesting child routes without a clear reason, making the route tree hard to reason about.

Key Takeaways

• Child routes nest inside a parent route's children array and render into the parent's own <router-outlet>.
• Child route paths are relative to their parent, not absolute.
• A default empty-path redirect child avoids an empty outlet at the parent's bare path.
• Relative navigation with relativeTo keeps sibling navigation resilient to path changes.