How to create nested routes with Angular?

Learn how nested (child) routes work in Angular, why multiple router outlets are useful, and how to implement tabbed navigation in complex dashboards.

Alain Chautard

April 21, 2026

Nested routes, or child routes, can be used when multiple router outlets are present in an Angular application. Why would we have multiple router outlets in the first place? Let’s take an example.

Say you have an application with multiple screens (pages) that you can navigate to. One of these screens is a complex dashboard that includes a section with tabs. You could use the router to implement navigation within those tabs, using nested routes.

This means we have a main router outlet as follows in the App component:

      <div>
  <button type="button" routerLink=""><< Menu</button>
</div>

And then, in our dashboard component, which would get displayed in the above router outlet, we’d have a second router outlet to handle our tabs:

      <div class="tabs-container">
  <div class="tabs">
    <a routerLink="tab1" routerLinkActive="active">Tab 1</a>
    <a routerLink="tab2" routerLinkActive="active">Tab 2</a>
    <a routerLink="tab3" routerLinkActive="active">Tab 3</a>
  </div>

  <div class="tab-content">
    <router-outlet></router-outlet>
  </div>
</div>

The router config looks like this — using the children section for nested / child routing:

       {
    path: 'tabs', 
    component: TabsComponent,
    children: [
      { path: '', redirectTo: 'tab1', pathMatch: 'full' },
      { path: 'tab1', component: Tab1Component },
      { path: 'tab2', component: Tab2Component },
      { path: 'tab3', component: Tab3Component }
    ]
  }

That config means that if the browser URL becomes /tabs, the TabComponent is displayed in the main router outlet, and the Tab1Component is displayed in the router outlet of TabComponent, because the empty child path redirects to /tab1, which then renders Tab1Component.

Then, if the browser URL becomes /tabs/tab3, the TabComponent is still displayed in the main router outlet, and Tab3Component is displayed in the router outlet of TabComponent.

This has three important benefits:

You can create links that navigate to a specific tab or sub-section of any given screen
Since the current “tab” depends on the URL, switching tabs can be done using the browser’s previous/next buttons. A full page refresh would display the same tab selected.
A URL can be bookmarked to display the application in the same state with the same tab selected.

You can see the code of my example on Stackblitz here.

More certificates.dev articles

Get the latest news and updates on developer certifications. Content is updated regularly, so please make sure to bookmark this page or sign up to get the latest content directly in your inbox.

State Management in React: useReducer, Context, and External Stores

Learn when to move beyond useState in React. This guide covers useReducer, the split-context pattern, external stores like Zustand, server state with TanStack Query, and useSyncExternalStore.

Aurora Scharff

Jun 4, 2026

Deploying Nuxt: Presets, Platforms, and Hybrid Rendering

How to deploy Nuxt to Vercel, Netlify, Cloudflare, and Node, with hybrid rendering via routeRules.

Reza Baar

Jun 3, 2026

Trigger options for @defer

Learn how Angular's @defer block triggers lazy loading and explore the different loading strategies available to control when components are rendered for better performance and user experience.

Alain Chautard

Jun 2, 2026