How to Create Child Routes in Angular: Simple Guide

In Angular, you create child routes by defining a children array inside a route object in your routing module. Each child route is nested under a parent route, allowing components to render inside the parent's <router-outlet>.

Syntax

To create child routes, add a children property to a route object. This property is an array of route objects representing the nested routes. The parent component should have a <router-outlet> where child components will display.

• path: URL segment for the route
• component: Component to render
• children: Array of child route objects

typescript

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component }
    ]
  }
];

Example

This example shows a parent route with two child routes. Navigating to /parent/child1 loads Child1Component inside ParentComponent's router outlet.

typescript

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent.component';
import { Child1Component } from './child1.component';
import { Child2Component } from './child2.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      { path: 'child1', component: Child1Component },
      { path: 'child2', component: Child2Component }
    ]
  },
  { path: '', redirectTo: 'parent', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// ParentComponent template example:
// <h2>Parent</h2>
// <router-outlet></router-outlet>

Output

When navigating to '/parent/child1', the page shows 'Parent' heading and renders Child1Component content inside the parent.

Common Pitfalls

Common mistakes include:

• Not adding <router-outlet> in the parent component template, so child routes have nowhere to render.
• Forgetting to import RouterModule.forRoot(routes) or RouterModule.forChild(routes) properly.
• Using absolute paths in child routes instead of relative paths.

html

/* Wrong: No router-outlet in parent component template */
// ParentComponent template:
// <h2>Parent</h2>
// <!-- Missing <router-outlet> -->

/* Right: Add router-outlet */
// ParentComponent template:
// <h2>Parent</h2>
// <router-outlet></router-outlet>

Quick Reference

• Define child routes inside children array of a parent route.
• Parent component must have <router-outlet> for children to render.
• Use relative paths for child routes.
• Import routing module with RouterModule.forRoot() or RouterModule.forChild().

Key Takeaways

Child routes are defined inside a parent route's 'children' array in Angular routing.

The parent component must include a to display child components.

Use relative paths for child routes to nest URLs correctly.

Always import RouterModule with the correct method in your routing module.

Missing in the parent component is a common cause of child routes not displaying.