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.

Practice

1. What is the main purpose of child routes in Angular routing?

easy

A. To replace the main router outlet completely

B. To disable navigation between pages

C. To load components without URLs

D. To nest pages inside other pages for better organization

Solution

1. Step 1: Understand child routes concept

   Child routes allow nesting routes inside a parent route to organize pages hierarchically.

2. Step 2: Compare options with concept

   Only To nest pages inside other pages for better organization correctly describes this purpose; others are incorrect or unrelated.

3. Final Answer:

   To nest pages inside other pages for better organization -> Option D

4. Quick Check:

   Child routes = Nested pages [OK]

Hint: Child routes organize nested pages inside parents [OK]

Common Mistakes:

• Thinking child routes replace main router outlet
• Believing child routes work without URLs
• Confusing child routes with disabling navigation

2. Which syntax correctly defines a child route in Angular's RouterModule?

easy

A. { path: 'parent', children: ChildComponent }

B. { path: 'parent/child', component: ChildComponent }

C. { path: 'parent', children: [{ path: 'child', component: ChildComponent }] }

D. { path: 'parent', component: ParentComponent, child: [{ path: 'child' }] }

Solution

1. Step 1: Recall child route syntax

   Child routes are defined inside a 'children' array property of a route object.

2. Step 2: Match syntax with options

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } correctly uses 'children' with an array of child route objects; others misuse properties or structure.

3. Final Answer:

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } -> Option C

4. Quick Check:

   Child routes use 'children' array [OK]

Hint: Child routes go inside 'children' array in route config [OK]

Common Mistakes:

• Using 'child' instead of 'children'
• Defining child path as 'parent/child' in one route
• Assigning component directly to 'children'

3. Given this route config:

{ path: 'dashboard', component: DashboardComponent, children: [ { path: 'stats', component: StatsComponent } ] }

What happens when navigating to /dashboard/stats?

medium

A. Only StatsComponent loads, DashboardComponent is ignored

B. DashboardComponent loads with StatsComponent displayed inside its router-outlet

C. DashboardComponent loads but StatsComponent does not display

D. Navigation fails with an error

Solution

1. Step 1: Understand nested route rendering

   Child routes render their components inside the parent's <router-outlet>.

2. Step 2: Apply to given URL

   At /dashboard/stats, DashboardComponent loads first, then StatsComponent loads inside its router-outlet.

3. Final Answer:

   DashboardComponent loads with StatsComponent displayed inside its router-outlet -> Option B

4. Quick Check:

   Child route renders inside parent component [OK]

Hint: Child shows inside parent's router-outlet on nested URL [OK]

Common Mistakes:

• Expecting child component to replace parent
• Forgetting to add router-outlet in parent
• Assuming navigation error without cause

4. Identify the error in this route config:

{ path: 'home', component: HomeComponent, children: { path: 'profile', component: ProfileComponent } }

medium

A. 'children' should be an array, not an object

B. Missing component for 'home' route

C. 'path' cannot be used inside children

D. ProfileComponent must be declared in AppModule

Solution

1. Step 1: Check 'children' property type

   The 'children' property must be an array of route objects, not a single object.

2. Step 2: Verify given config

   Here, 'children' is incorrectly assigned an object instead of an array.

3. Final Answer:

   'children' should be an array, not an object -> Option A

4. Quick Check:

   'children' = array of routes [OK]

Hint: 'children' must always be an array, not a single object [OK]

Common Mistakes:

• Using object instead of array for children
• Confusing 'path' usage inside children
• Assuming missing component causes this error

5. You want to create a nested route where /settings loads SettingsComponent and /settings/profile loads ProfileComponent inside it. Which setup is correct?

hard

A. Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template

B. Define { path: 'settings/profile', component: ProfileComponent } only, no children needed

C. Define { path: 'settings', component: ProfileComponent, children: [{ path: 'profile', component: SettingsComponent }] }

D. Define { path: 'settings', component: SettingsComponent } and load ProfileComponent manually inside SettingsComponent without routing

Solution

1. Step 1: Setup nested routes properly

   To nest ProfileComponent inside SettingsComponent, use 'children' array with ProfileComponent route.

2. Step 2: Ensure parent template has router-outlet

   SettingsComponent template must include <router-outlet> to display child routes.

3. Final Answer:

   Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template -> Option A

4. Quick Check:

   Nested route + router-outlet = correct setup [OK]

Hint: Parent needs router-outlet and children array for nested routes [OK]

Common Mistakes:

• Defining nested path as one string without children
• Swapping parent and child components
• Not adding router-outlet in parent component