Angular › Routing

How would you implement nested, or child, routes in Angular for a layout with a shared parent section?

Advanced

Answer

You nest a children array inside a parent route definition, and place a router outlet inside the parent component's template, letting the parent's own layout, like a shared sidebar, stay visible while its child routes render their specific content inside that inner outlet.

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

Real-world example A settings section keeps its shared sidebar navigation visible across all its sub pages, like profile and security settings, using nested child routes rendering their specific content inside the parent layout's own router outlet.

Common follow-ups: How does the router decide which child route to activate by default when none is specified?;How would you pass data down from a parent route to its child routes?

Components & Templates;Angular Style Guide & Best Practices