How to create nested routes with Angular? | by Alain Chautard | Apr, 2026

Press enter or click to view image in full size

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:

<< Menu

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:

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.

Press enter or click to view image in full size

This has three important benefits:

1. You can create links that navigate to a specific tab or sub-section of any given screen
2. 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.
3. 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.

My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help development teams learn and become proficient with Angular / React / JavaScript.

If you need any help learning web technologies, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and YouTube video page.