Child routes and nested routing in Angular

Introduction

Child routes let you organize your app's pages inside other pages. It helps keep things neat and easy to navigate.

You want a main page with smaller pages inside it, like a dashboard with tabs.

You need to show different content areas without leaving the main page.

You want to reuse a layout and just change parts inside it.

You want URLs that reflect the page hierarchy, like /products and /products/details.

You want to load parts of your app only when needed to save loading time.

Syntax

Angular

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component }
    ]
  }
];

The children array holds the nested routes inside a parent route.

The parent component should have a <router-outlet> where child routes show up.

Examples

This sets up a dashboard page with two child pages: stats and reports.

Angular

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'stats', component: StatsComponent },
      { path: 'reports', component: ReportsComponent }
    ]
  }
];

Here, the products page shows a list by default and details when an ID is in the URL.

Angular

const routes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      { path: '', component: ProductListComponent },
      { path: ':id', component: ProductDetailComponent }
    ]
  }
];

Sample Program

This example shows a parent page with two child pages. The parent has links to switch between child1 and child2. The child content appears inside the parent's <router-outlet>.

When you open the app, it redirects to 'parent/child1' by default.

Angular

import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Page</h2>
    <nav>
      <a routerLink="child1" aria-label="Go to Child 1">Child 1</a> |
      <a routerLink="child2" aria-label="Go to Child 2">Child 2</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
export class ParentComponent {}

@Component({
  selector: 'app-child1',
  template: `<p>This is Child 1 content.</p>`
})
export class Child1Component {}

@Component({
  selector: 'app-child2',
  template: `<p>This is Child 2 content.</p>`
})
export class Child2Component {}

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component }
    ]
  },
  { path: '', redirectTo: 'parent/child1', pathMatch: 'full' }
];

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [AppComponent, ParentComponent, Child1Component, Child2Component],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule {}

Important Notes

Always put <router-outlet> in the parent component template to show child routes.

Use routerLink for navigation links to keep the app fast and smooth.

Child routes help keep URLs clean and show the app structure clearly.

Summary

Child routes let you nest pages inside other pages for better organization.

The parent component needs a <router-outlet> to display child content.

Use child routes to create layouts with changing parts and clear URLs.