How to Create Nested Routes in Angular: Simple Guide

In Angular, create nested routes by defining child routes inside a parent route's children array in the routing module. Use <router-outlet> in the parent component's template to display child components based on the nested route.

Syntax

Nested routes in Angular are defined by adding a children array inside a route object. Each child route has its own path and component. The parent component must include a <router-outlet> to render the child routes.

• path: URL segment for the route
• component: Component to display
• children: Array of nested route objects

typescript

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

Example

This example shows a parent route dashboard with two nested child routes stats and settings. The DashboardComponent contains a <router-outlet> where the child components render based on the URL.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { StatsComponent } from './stats.component';
import { SettingsComponent } from './settings.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'stats', component: StatsComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: '', redirectTo: 'dashboard/stats', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// DashboardComponent template:
// <h2>Dashboard</h2>
// <nav>
//   <a routerLink="stats">Stats</a> |
//   <a routerLink="settings">Settings</a>
// </nav>
// <router-outlet></router-outlet>

Output

When navigating to '/dashboard/stats', the DashboardComponent shows its header and the StatsComponent content below it. Navigating to '/dashboard/settings' shows the SettingsComponent content inside the DashboardComponent.

Common Pitfalls

• Forgetting to add <router-outlet> in the parent component will prevent child routes from rendering.
• Using absolute paths in child routes can cause unexpected navigation; child paths should be relative.
• Not importing RouterModule.forRoot() or RouterModule.forChild() properly can break routing.

typescript

/* Wrong: No <router-outlet> in parent component template */
@Component({
  selector: 'app-parent',
  template: '<h1>Parent</h1>' // Missing <router-outlet>
})
export class ParentComponent {}

/* Right: Include <router-outlet> to render children */
@Component({
  selector: 'app-parent',
  template: '<h1>Parent</h1><router-outlet></router-outlet>'
})
export class ParentComponent {}

Quick Reference

Tips for Nested Routes in Angular:

• Define child routes inside the children array of a parent route.
• Always add <router-outlet> in the parent component template.
• Use relative paths for child routes.
• Use RouterModule.forRoot() in the root module and RouterModule.forChild() in feature modules.

Key Takeaways

Define nested routes using the children array inside a parent route object.

Include in the parent component template to display child routes.

Use relative paths for child routes to avoid navigation issues.

Import RouterModule correctly with forRoot or forChild depending on the module.

Test navigation to ensure child components render as expected inside the parent.