Child routes and nested routing in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are child routes in Angular?

Child routes are routes defined inside another route's configuration. They allow nesting of views, so a parent component can have its own layout while child components render inside it.

beginner

How do you define nested routes in Angular?

Nested routes are defined by adding a 'children' array inside a route object in the RouterModule configuration. Each child route has its own path and component.

beginner

What Angular directive is used to display child routes inside a parent component?

The directive is used inside the parent component's template to mark where child routes will be rendered.

intermediate

Why use nested routing in Angular applications?

Nested routing helps organize complex apps by breaking UI into smaller parts. It keeps parent layouts consistent while loading different child views, improving code reuse and navigation clarity.

intermediate

How does Angular match URLs with nested routes?

Angular matches the URL segments step-by-step. It first matches the parent route path, then looks inside its children array to match the next segment, continuing until the full URL is matched.

Which Angular property holds child routes inside a route configuration?

A nested

B children

C subRoutes

D childRoutes

The 'children' property is used to define child routes inside a route object.

Where should you place to render child routes?

A In the routing module file

B In the main app module only

C Inside the child component's template

D Inside the parent component's template

must be inside the parent component's template to show child routes.

What happens if you omit in a parent component with child routes?

A Child routes won't render

B App crashes immediately

C Child routes render outside the parent

D Parent component is not displayed

Without , Angular has no place to display child routes, so they won't appear.

How does Angular handle URL matching for nested routes?

A Matches parent path first, then child paths sequentially

B Matches all paths at once randomly

C Ignores parent paths and matches only child paths

D Matches only the last segment of the URL

Angular matches URL segments step-by-step from parent to child routes.

Which of these is a benefit of using nested routing?

A Removes the need for routing modules

B Makes the app load slower

C Keeps parent layout consistent while changing child views

D Prevents navigation between pages

Nested routing allows the parent layout to stay while child views change, improving user experience.

Explain how to set up child routes and nested routing in Angular. Include how to configure routes and display child components.

Think about how routes are nested and where child views appear.

Describe why nested routing is useful in Angular applications and how it affects user navigation and layout.

Consider how apps with many pages keep a common header or sidebar.

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