Child Routes

Child routes in Angular allow you to define nested routes within a parent route. This hierarchical structure enables you to organize your application's routing configuration more effectively and create more modular and maintainable code.

Define Child Routes

const routes: Routes = [
  { 
    path: 'products', 
    component: ProductsComponent,
    children: [
      { path: 'list', component: ProductListComponent },
      { path: 'details/:id', component: ProductDetailsComponent },
      { path: '', redirectTo: 'list', pathMatch: 'full' }
    ]
  }
];

In this example, the 'products' route is the parent route, and it contains three child routes: 'list', 'details/:id', and an empty path that redirects to 'list'.