Skip to main content

What are nested (child) routes?

AngularJunior~1 min read

Nested (child) routes are routes that are embedded inside a parent component through the <router-outlet> located in that component's template.

They allow you to:

build a navigation hierarchy (for example, user/profile, user/settings);
render nested components inside the parent;
make routes cleaner and more modular.

How they are declared:

ts

const routes: Routes = [
  {
    path: 'user',
    component: UserComponent,
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

How they work:

When navigating to /user/profile, Angular loads UserComponent, and inserts ProfileComponent inside it through <router-outlet>.
The path becomes more complex, but logical: /user/profile instead of two unrelated routes.

It's like tabs inside a user dashboard - the parent always stays in place, while the content changes.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.