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.