[Solved] Given this route config:{ path: 'dashboard', component: DashboardComponent, children: [ { path: 'stats', component: StatsComponent } ] }What happens when navigating to /dashboard/stats? | Angular

Angular - Routing

Given this route config:

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

What happens when navigating to /dashboard/stats?

AOnly StatsComponent loads, DashboardComponent is ignored

BDashboardComponent loads with StatsComponent displayed inside its router-outlet

CDashboardComponent loads but StatsComponent does not display

DNavigation fails with an error

Step-by-Step Solution

Solution:

Step 1: Understand nested route rendering
Child routes render their components inside the parent's <router-outlet>.
Step 2: Apply to given URL
At /dashboard/stats, DashboardComponent loads first, then StatsComponent loads inside its router-outlet.
Final Answer:
DashboardComponent loads with StatsComponent displayed inside its router-outlet -> Option B
Quick Check:
Child route renders inside parent component [OK]

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

Common Mistakes:

MISTAKES

Master "Routing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this route config: