How Do Nested Routes Work in Angular? Explained Simply

If this story clicks with you, drop a like or share it—it might help someone else make sense of Angular routing too! Alright, let’s dive in.

---

Think of creating nested or child routes in Angular like designing a set of rooms in a treehouse. I’ve got this amazing treehouse, and at the base of the tree is the Main Room—the entry point where all visitors start.

Now, I want to add more rooms—cool ones like a Game Room, a Secret Room, and maybe even a cozy Reading Nook. These are all connected to the Main Room, like my primary routes in Angular. Each room has a signpost pointing visitors in the right direction.

But here’s the fun part: inside the Game Room, I want smaller sections like Arcade Corner, Board Game Shelf, and VR Pod. These are the child routes—special sections nested inside a specific parent room. To make them accessible, I draw up a map showing how to navigate from the Main Room, through the Game Room, and into its subsections. That map is my Angular route configuration.

In Angular, I write these “maps” in my RouterModule setup. For example, I define the Game Room route and then nest its child routes, all inside a children array. This ensures that when someone walks into the Game Room, they can seamlessly flow into Arcade Corner or VR Pod without starting back at the Main Room.

Just like building the treehouse, it’s all about organizing paths so visitors never get lost. They’ll always know how to find the next spot without confusion.

---

Alright, back to our treehouse. In Angular, the Main Room and its connected rooms are defined in a routes array, which acts as the blueprint for navigation. Here’s how I would map out our treehouse using JavaScript:

Step 1: The Main Room and Primary Routes

const routes: Routes = [
  { path: '', component: MainRoomComponent }, // The Main Room
  { path: 'game-room', component: GameRoomComponent }, // Game Room
  { path: 'reading-nook', component: ReadingNookComponent } // Reading Nook
];

This is the simplest setup: each path leads directly to its component. But now, let’s create child routes for the Game Room.

Step 2: Adding Child Routes

The Game Room is a parent route, so I nest its child routes inside a children property:

const routes: Routes = [
  { path: '', component: MainRoomComponent }, // Main Room
  {
    path: 'game-room',
    component: GameRoomComponent,
    children: [
      { path: 'arcade-corner', component: ArcadeCornerComponent },
      { path: 'board-game-shelf', component: BoardGameShelfComponent },
      { path: 'vr-pod', component: VRPodComponent }
    ]
  },
  { path: 'reading-nook', component: ReadingNookComponent } // Reading Nook
];

Now, if someone navigates to /game-room/arcade-corner, they’ll land in the Arcade Corner section of the Game Room. The treehouse is coming together!

Step 3: Activating Nested Routes

To display child routes, I use the <router-outlet> directive in the parent component template (GameRoomComponent). It’s like a doorway connecting the Game Room to its subsections:

<!-- game-room.component.html -->
<h2>Welcome to the Game Room!</h2>
<router-outlet></router-outlet>

When someone navigates to /game-room/arcade-corner, the Arcade Corner content appears right inside the Game Room, without reloading the entire app.

---

Key Takeaways

1. Parent-Child Structure: Nested routes in Angular are defined using the children property in the route configuration.
2. Seamless Navigation: <router-outlet> allows child components to load dynamically within their parent component.
3. URL Clarity: Each child route is accessed via a hierarchical URL (e.g., /parent/child), reflecting the structure of your app.