Child Routes & Layouts

A route can have children that render inside the parent component's own router-outlet — perfect for shared layouts.

4 min read Level 2/5 #angular#router#layouts

What you'll learn

Define a children array on a route
Use a layout component as the parent
Provide a default redirect child

Nested URLs (/app/dashboard, /app/settings) usually share a layout — a sidebar, header, breadcrumb. Child routes match a parent’s component and render into its own <router-outlet />.

Define children

export const routes: Routes = [
  {
    path: 'app',
    component: LayoutComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'settings', component: SettingsComponent },
    ],
  },
];

The redirect with pathMatch: 'full' handles /app (no trailing segment) — without it the redirect would also fire for /app/dashboard.

The layout component

It renders the shell plus its own outlet — that is where children mount.

import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, RouterOutlet],
  template: `
    <aside>
      <a routerLink="dashboard" routerLinkActive="is-active">Dashboard</a>
      <a routerLink="settings" routerLinkActive="is-active">Settings</a>
    </aside>
    <main>
      <router-outlet />
    </main>
  `,
})
export class LayoutComponent {}

Note: the child routerLink values are relative — no leading slash. They resolve against the current route, so the URL becomes /app/dashboard.

Nesting deeper

Children can have children. Each nesting level needs its own <router-outlet /> in the parent’s template. Most apps stop at two levels for sanity.

Router Events →