Why Child routes and nested routing in Angular? - Purpose & Use Cases

The Big Idea

Discover how nesting routes can turn a tangled website into a smooth, easy-to-manage experience!

The Scenario

Imagine building a website where each main page has several subpages, like a shop with categories and products. You try to manage all these pages by writing separate code for each URL manually.

The Problem

Manually handling every URL and page combination quickly becomes confusing and messy. You have to write repetitive code, and updating one part means changing many places. It's easy to make mistakes and hard to keep track of what belongs where.

The Solution

Child routes and nested routing let you organize pages inside other pages naturally. You define a main route and then nest smaller routes inside it. Angular automatically shows the right content in the right place, keeping your code clean and easy to manage.

Before vs After

✗ Before

if (url === '/shop') { showShop(); } else if (url === '/shop/electronics') { showElectronics(); } else if (url === '/shop/electronics/phones') { showPhones(); }

✓ After

const routes = [{ path: 'shop', component: ShopComponent, children: [{ path: 'electronics', component: ElectronicsComponent, children: [{ path: 'phones', component: PhonesComponent }] }] }];

What It Enables

This makes building complex websites with many related pages simple, organized, and easy to update.

Real Life Example

Think of an online store where you click a category, then a subcategory, and finally a product. Nested routing lets the website load each part smoothly without reloading the whole page.

Key Takeaways

Manually managing many page URLs is confusing and error-prone.

Child routes let you nest pages inside others for better structure.

Angular handles showing nested pages automatically and cleanly.