Child Routes and Named (Auxiliary) Routes

Child routes allow nesting routes inside a parent route. This is useful for layouts where a parent component contains a router outlet that loads different child components.

import { Routes } from "@angular/router";
import { DashboardComponent } from "./dashboard.component";
import { StatsComponent } from "./stats.component";
import { ReportsComponent } from "./reports.component";

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

The parent template must contain a router outlet.

<h2>Dashboard</h2>
<router-outlet></router-outlet>

Named (auxiliary) routes allow rendering multiple routed components simultaneously.

<router-outlet></router-outlet> <router-outlet name="sidebar"></router-outlet>