Routingintermediate
Child Routes
Explain how nested route configurations render child views inside a parent component's own router-outlet.
Child routes let a parent component own its own <router-outlet>, into which nested child routes render — the classic example being a settings page with a persistent sidebar navigation and tabs, where the sidebar (parent component) stays mounted while only the tab content (child route) swaps as the user navigates between settings/profile, settings/security, and so on.
It's like a museum's floor plan — the main entrance (parent route/outlet) stays the same regardless of which gallery you're in, and walking to a specific gallery (child route) only changes what's displayed within that one wing, not the entrance hall itself.
Key Concepts
1
This is configured by nesting a children array inside a parent route's definition, where each child route's path is relative to (and effectively appended after) the parent's own path. The parent component's template must include its own <router-outlet> for the matched child to actually render somewhere — forgetting this is a very common bug: the URL changes correctly, but nothing visibly updates because there's no outlet to render into.
childrenpath<router-outlet>
2
A layout component (one whose entire purpose is hosting a router-outlet plus persistent chrome like a sidebar or header) is the idiomatic pattern here, and it composes naturally with lazy loading — an entire feature's child routes can be lazy-loaded together as a group via loadChildren pointing at that feature's own nested Routes array, keeping the parent-child relationship intact even across the lazy-loading boundary.
router-outletloadChildrenRoutes
3
Interviewers sometimes ask how a child route's guards/resolvers interact with the parent's — child routes inherit the requirement to satisfy the parent's canActivate/canActivateChild guards on top of their own, since navigating into any child implicitly means navigating through the parent first.
canActivatecanActivateChild