Nested Routes and Layout Pages (Professional Routing)

Most real applications have layout pages like: - dashboard with sidebar - admin area - settings pages You do not want to repeat the sidebar on every page. Nested routes solve this. ## Step 1: Create a layout component ```ts import { Component } from '@angular/core'; import { RouterOutlet, RouterLink } from '@angular/router'; @Component({ selector: 'app-dashboard-layout', standalone: true, imports: [RouterOutlet, RouterLink], template: ` <div class="layout"> <aside> <a routerLink="/dashboard">Home</a> <a routerLink="/dashboard/settings">Settings</a> </aside> <main> <router-outlet></router-outlet> </main> </div> `, }) export class DashboardLayoutComponent {} ``` ## Step 2: Add child routes ```ts export const routes = [ { path: 'dashboard', component: DashboardLayoutComponent, children: [ { path: '', loadComponent: () => import('./dash-home.component').then(m => m.DashHomeComponent) }, { path: 'settings', loadComponent: () => import('./dash-settings.component').then(m => m.DashSettingsComponent) }, ], }, ]; ``` ## How it renders ```mermaid flowchart TD A[/dashboard URL] --> B[DashboardLayoutComponent] B --> C[router-outlet inside layout] C --> D[DashHomeComponent] ``` > Next: Route resolvers to load data before page opens.