← Back to Chapters

Nested & Dynamic Routes

? Nested & Dynamic Routes

Angular Routing • Nested Layouts • Params

? Quick Overview

Nested routes let you build a hierarchy of views inside a parent route (for example, an Admin area with its own pages). Dynamic routes allow you to pass parameters (like /products/42) so each nested view can display data based on the URL. Together, they help you create scalable layouts with multiple levels of routing.

? Key Concepts

  • Nested routes are defined using the children array inside a parent route.
  • Dynamic routes use route parameters (e.g. :id) that can be read in a component.
  • <router-outlet> in a parent component is where its child routes are rendered.
  • ActivatedRoute is used to access dynamic parameters in nested components.
  • Subscribing to paramMap lets your component react when the route parameters change.

? Defining Nested Routes

To define nested routes, configure a parent path with a component and provide its child routes using the children property. The parent route becomes a wrapper layout for the nested views.

? View Code Example 
// app-routing.module.ts - nested admin routes
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { DashboardComponent } from './admin/dashboard/dashboard.component';
import { SettingsComponent } from './admin/settings/settings.component';

const routes: Routes = [
{ path: 'admin', component: AdminComponent,
children: [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'settings', component: SettingsComponent }
]
}
];

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

? Accessing Dynamic Parameters in Nested Routes

When your nested route includes a parameter (for example, /products/:id), you can use ActivatedRoute to read that parameter in the child component. Using paramMap ensures your component updates whenever the URL changes.

? View Code Example 
// product-detail.component.ts - reading a dynamic route param
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-product-detail',
template: '<p>Product ID: {{ productId }}</p>'
})
export class ProductDetailComponent implements OnInit {
productId!: string;

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.paramMap.subscribe(params => {
this.productId = params.get('id')!;
});
}
}

? Using router-outlet for Nested Views

The parent component of a nested route must contain a <router-outlet>. This is where the current child route component (like Dashboard or Settings) will be rendered.

? View Code Example 
<!-- admin.component.html - layout for nested admin child routes -->
<h2>Admin Panel</h2>
<nav>
<a routerLink="dashboard">Dashboard</a> |
<a routerLink="settings">Settings</a>
</nav>

<router-outlet></router-outlet>

? How Nested & Dynamic Routes Work Together

  1. User navigates to /admin/dashboard.
  2. AdminComponent loads (parent route), displaying the heading and navigation menu.
  3. The child route dashboard is matched and DashboardComponent is rendered inside the parent’s <router-outlet>.
  4. For a URL like /products/42, the ProductDetailComponent reads the id parameter using ActivatedRoute and shows “Product ID: 42”.

This pattern lets you build sections like /admin, /user, or /shop with their own internal pages and dynamic content, while keeping your routing clean and organized.

✅ Tips & Best Practices

  • Design a clear, logical route hierarchy (e.g. /admin → /admin/dashboard, /admin/settings).
  • Always include <router-outlet> in the parent component of nested routes.
  • Use route guards with nested routes to protect whole sections like admin areas.
  • Prefer subscribing to paramMap instead of relying only on snapshot for dynamic parameters.
  • Keep route paths short and meaningful so URLs are easy to read and remember.

? Try It Yourself

  • Create a /user section with nested routes for profile, settings, and history.
  • Add a dynamic route like /user/:id/profile and display the current user ID in the profile component.
  • Use routerLink to navigate between the nested user routes and observe how the content changes inside a single layout.
  • Experiment with adding a second level of nesting, such as /admin/reports/sales and /admin/reports/users.