32. Child Routes or Nested Routes

In Angular, Child Routes or Nested Routes allow you to create a hierarchy of routes where a parent route has one or more child routes. These child routes are rendered inside a <router-outlet> in the parent component’s template.

Scenario Example:

• Home, Products, About, Contact: These are the main sections of your app, where Products is the parent route.

• T-Shirts, Trousers: These are the child routes under Products.

  Home │ Products │ ├── T-Shirts │ └── Trousers │ About │ Contact

Code Explanation:

Step 1: Define the Routes (Parent & Child Routes)

You define a parent route and add child routes within the children property of the parent route. Each child route can point to its own component.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductComponent } from './product/product.component';
import { TshirtComponent } from './product/tshirt/tshirt.component';
import { TrouserComponent } from './product/trouser/trouser.component';
 
const routes: Routes = [
  {
    path: 'product', // Parent Route
    component: ProductComponent,  // Parent Component
    children: [  // Child Routes
      { path: 'tshirt', component: TshirtComponent },  // First Child Route
      { path: 'trouser', component: TrouserComponent },    // Second Child Route
    ]
  },
  { path: '', redirectTo: '/product', pathMatch: 'full' } // Default route
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Explanation of Routes:

1. Parent Route (/product):
   • This route displays the ProductComponent which is the parent route.
   • The children array specifies two child routes:
     • /product/tshirt → renders TshirtComponent
     • /product/trouser → renders TrouserComponent
2. Default Route: If the user navigates to the root URL (e.g., /), they are redirected to /product.

Step 2: Set Up the Parent Component Template

In the ProductComponent, you need a <router-outlet> to display the child routes. You also add navigation links (routerLink) to navigate between child components.

product.component.html (Parent Component)

<h2>Product</h2>
<nav>
  <a routerLink="tshirt">T-Shirts</a>
  <a routerLink="trouser">Trousers</a>
</nav>
<router-outlet></router-outlet> <!-- Placeholder for child routes -->

• <router-outlet> is where the child components will be rendered.
• routerLink is used to navigate to child routes, such as tshirt or trouser.

Step 3: Create the Child Components

You create the child components (TshirtComponent and TrouserComponent) to handle their respective routes.

tshirt.component.ts (Child Component)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-tshirt',
  template: `<h3>T-Shirt Section</h3>`
})
export class TshirtComponent {}

trouser.component.ts (Child Component)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-trouser',
  template: `<h3>Trouser Section</h3>`
})
export class TrouserComponent {}

Step 4: Add Router Outlet in Parent Component

The parent component will display the child components based on the active route.

product.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
})
export class ProductComponent {}

Final Overview of the Flow:

1. When the user navigates to /product, the ProductComponent is displayed, and the child route links (/product/tshirt and /product/trouser) are shown.
2. When the user clicks on T-Shirts or Trousers, the respective child component is displayed inside the <router-outlet> of the parent component.

Full Example of Parent and Child Routing:

1. URL: /product
   • Displays ProductComponent with links to child routes.
2. URL: /product/tshirt
   • Displays TshirtComponent inside the ProductComponent.
3. URL: /product/trouser
   • Displays TrouserComponent inside the ProductComponent.

Conclusion:

Child routes in Angular allow you to build a hierarchical routing system. The parent route defines the main view, and the child routes are loaded into the parent’s <router-outlet>. This pattern is very useful for building complex layouts and nested views in Angular applications.