[Solved] Given this route configuration:const routes = [ { path: 'home', component: HomeComponent }, { path: 'profile', component: ProfileComponent, outlet:... | Angular

Angular - Routing

Given this route configuration:

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

And this template:

<router-outlet></router-outlet>
<router-outlet name="sidebar"></router-outlet>

What happens when navigating to URL /home(sidebar:profile)?

AOnly HomeComponent renders; ProfileComponent is ignored.

BOnly ProfileComponent renders in sidebar outlet; main outlet is empty.

CHomeComponent renders in main outlet; ProfileComponent renders in sidebar outlet.

DAngular throws an error due to invalid URL format.

Step-by-Step Solution

Solution:

Step 1: Understand named outlets in URL
The URL /home(sidebar:profile) means load HomeComponent in the primary outlet and ProfileComponent in the 'sidebar' outlet.
Step 2: Match outlets to template
The template has a default unnamed outlet and a named outlet 'sidebar', so both components render in their respective outlets.
Final Answer:
HomeComponent renders in main outlet; ProfileComponent renders in sidebar outlet. -> Option C
Quick Check:
Named outlets URL syntax = multiple components render [OK]

Quick Trick: Use (outletName:route) in URL to load named outlets [OK]

Common Mistakes:

MISTAKES

Master "Routing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this route configuration: