Child routes and nested routing in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be rendered by the nested router-outlet?

Given the following Angular route configuration and component setup, what will be displayed inside the nested <router-outlet> when navigating to /dashboard/stats?

Angular

const routes = [
  { path: 'dashboard', component: DashboardComponent, children: [
    { path: 'stats', component: StatsComponent },
    { path: 'reports', component: ReportsComponent }
  ]}
];

// DashboardComponent template:
// <h1>Dashboard</h1>
// <router-outlet></router-outlet>

A <app-stats></app-stats>

B <h1>Dashboard</h1><app-reports></app-reports>

C <h1>Dashboard</h1>

D <h1>Dashboard</h1><app-stats></app-stats>

💡 Hint

Remember that child routes render inside the parent's <router-outlet>.

When navigating to /dashboard/stats, Angular renders DashboardComponent first, which includes a <router-outlet>. Inside this outlet, the StatsComponent is rendered because it matches the child route stats.

📝 Syntax

intermediate

Identify the correct child route syntax

Which of the following Angular route configurations correctly defines a child route for profile under user?

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

B const routes = [{ path: 'user/profile', component: ProfileComponent, children: [{ path: '', component: UserComponent }] }];

C const routes = [{ path: 'user', component: UserComponent, children: [{ path: 'profile', component: ProfileComponent }] }];

D const routes = [{ path: 'user', component: UserComponent }, { path: 'profile', component: ProfileComponent, children: [] }];

💡 Hint

Child routes must be inside the children array of the parent route and the parent must have a component.

Option C correctly nests the profile route inside the user route's children array and assigns components properly.

Option C incorrectly nests user inside profile.

Option C misses the parent component, which is required for child routes.

Option C separates routes without nesting, so profile is not a child route.

🔧 Debug

advanced

Why does the nested route not render?

Consider this Angular route setup:

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

The HomeComponent template is:

<h2>Home</h2>
<div>Welcome!</div>

When navigating to /home/details, the DetailsComponent does not appear. What is the most likely cause?

A The <code>HomeComponent</code> template is missing a <code>&lt;router-outlet&gt;</code> for child routes.

B The route path 'details' should be defined at the root level, not as a child.

C The <code>DetailsComponent</code> is not declared in the module.

D The URL should be '/details/home' to match the route.

💡 Hint

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

Without a <router-outlet> in HomeComponent, Angular has no place to render the child DetailsComponent. Adding <router-outlet> fixes this.

❓ state_output

advanced

What is the URL and rendered output after navigation?

Given this Angular route configuration:

const routes = [
  { path: '', component: MainComponent, children: [
    { path: '', component: WelcomeComponent },
    { path: 'about', component: AboutComponent }
  ]}
];

And the MainComponent template:

<nav>
  <a routerLink="">Welcome</a>
  <a routerLink="about">About</a>
</nav>
<router-outlet></router-outlet>

What will be the URL and displayed content after clicking the 'About' link?

A URL: '/about'; Content: Only AboutComponent without MainComponent

B URL: '/about'; Content: MainComponent with AboutComponent inside router-outlet

C URL: '/'; Content: WelcomeComponent only

D URL: '/about'; Content: MainComponent with WelcomeComponent inside router-outlet

💡 Hint

Child routes render inside the parent's <router-outlet> and the parent component remains visible.

Clicking 'About' navigates to '/about'. The MainComponent stays rendered, and inside its <router-outlet>, the AboutComponent is displayed.

🧠 Conceptual

expert

Which statement about nested routing is TRUE?

Choose the correct statement about Angular child routes and nested routing.

A Child routes require the parent component to have a <code>&lt;router-outlet&gt;</code> to render nested components.

B Nested routes can only be defined up to two levels deep in Angular routing.

C Child routes automatically inherit all parent route guards without additional configuration.

D Child routes replace the parent component in the DOM when activated.

💡 Hint

Think about how Angular renders nested routes inside parent components.

Option A is true: the parent component must have a <router-outlet> to display child routes.

Option A is false: route guards are not automatically inherited.

Option A is false: Angular supports multiple nested levels.

Option A is false: child routes render inside the parent, not replace it.

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