How to create child routes in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Child routes in Angular enable hierarchical navigation structures, allowing you to create nested components that correspond to URL segments for complex applications. As the creator of CoreUI, I’ve implemented nested routing systems for large-scale Angular projects. The most effective approach is defining child routes within parent route configurations using the children property. This provides organized, maintainable navigation structures that scale well with application complexity.
Define child routes using the children property in your route configuration to create nested navigation structures.
// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { DashboardComponent } from './dashboard/dashboard.component'
import { UserListComponent } from './users/user-list.component'
import { UserDetailComponent } from './users/user-detail.component'
import { UserProfileComponent } from './users/user-profile.component'
const routes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
children: [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'overview', component: OverviewComponent },
{ path: 'analytics', component: AnalyticsComponent }
]
},
{
path: 'users',
component: UserListComponent,
children: [
{ path: ':id', component: UserDetailComponent },
{ path: ':id/profile', component: UserProfileComponent }
]
}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// dashboard.component.html
<div class="dashboard">
<nav>
<a routerLink="overview">Overview</a>
<a routerLink="analytics">Analytics</a>
</nav>
<router-outlet></router-outlet>
</div>
This configuration creates nested routes where /dashboard/overview loads the DashboardComponent with OverviewComponent as a child, and /users/123/profile loads UserListComponent with UserProfileComponent as a child. The parent component must include <router-outlet></router-outlet> to display child components. Child routes inherit the parent path and can include parameters and redirects.
Best Practice Note:
This nested routing pattern is used extensively in CoreUI’s Angular admin templates for organizing complex dashboard layouts. Always include default redirects for parent routes and use relative navigation in child components for maintainable route structures.
