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'.