Child routes and nested routing in Angular - Step-by-Step Execution

Concept Flow - Child routes and nested routing

App starts

↓

Router reads URL

↓

Match parent route

↓

Render parent component

↓

Check for child route

Yes↓

Match child route

↓

Render child component inside parent

↓

Display nested view

↓

User navigates -> Repeat

The router first matches the parent route, renders its component, then checks and renders the child route component inside the parent's view.

Execution Sample

Angular

const routes = [
  { path: 'home', component: HomeComponent, children: [
    { path: 'profile', component: ProfileComponent }
  ]}
];

Defines a parent route 'home' with a nested child route 'profile' that renders inside HomeComponent.

Execution Table

Step	URL	Router Action	Component Rendered	View Location
1	/home	Match 'home' route	HomeComponent	Main outlet
2	/home	Check for child route	None yet	No nested view rendered
3	/home/profile	Match 'home' route	HomeComponent	Main outlet
4	/home/profile	Match child 'profile' route	ProfileComponent	Inside HomeComponent's router-outlet
5	/home/profile	Display nested view	HomeComponent + ProfileComponent	Parent + nested outlet
6	/about	No match in 'home' route	None	No components rendered

💡 Routing stops when no matching route is found or URL fully matched.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
Current URL	''	/home	/home/profile	/home/profile	/home/profile
Matched Parent Route	null	home	home	home	home
Matched Child Route	null	null	profile	profile	profile
Rendered Components	none	HomeComponent	HomeComponent	HomeComponent + ProfileComponent	HomeComponent + ProfileComponent

Key Moments - 3 Insights

Why does the child component render inside the parent component's view?

Because the parent component's template includes a <router-outlet> where the child route's component is inserted, as shown in steps 4 and 5 of the execution_table.

What happens if the URL matches only the parent route but no child route?

Only the parent component renders and no nested child component appears, as seen in step 2 where no child route matched yet.

Why does navigation to a non-matching URL render no components?

Because the router cannot find any route matching the URL, so it renders nothing, as shown in step 6.

Visual Quiz - 3 Questions

Look at the execution table, what component(s) are rendered at step 3 when URL is '/home/profile'?

A Only HomeComponent

B Only ProfileComponent

C HomeComponent and ProfileComponent

D No components rendered

💡 Hint

Check the 'Component Rendered' column at step 3 in the execution_table.

At which step does the router render the child component inside the parent?

A Step 2

B Step 4

C Step 1

D Step 6

💡 Hint

Look for when 'ProfileComponent' appears in the 'Component Rendered' column.

If the URL was '/home/settings' and no child route 'settings' exists, what would happen?

A No components render

B Both HomeComponent and SettingsComponent render

C Only HomeComponent renders

D ProfileComponent renders

💡 Hint

Refer to how unmatched child routes behave in the execution_table and key_moments.

Concept Snapshot

Child routes let you nest routes inside a parent route.
Parent component renders first.
Child routes render inside parent's <router-outlet>.
URL matches parent then child.
If no child matches, only parent shows.
Use 'children' array in route config.

Full Transcript

When Angular starts routing, it reads the URL and tries to match the parent route first. If it finds a parent route, it renders that component. Then it checks if the URL has a child route segment. If yes, it matches the child route and renders the child component inside the parent's router-outlet. This nesting allows building complex layouts with components inside components. If the URL matches only the parent route, only the parent component shows. If no route matches, no components render. This flow repeats on every navigation.