How to use router-outlet in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Router-outlet is Angular’s directive that displays routed components in designated areas of your application, enabling dynamic content loading for single-page applications. With over 25 years of experience building enterprise applications and as the creator of CoreUI, I’ve used router-outlet extensively for complex navigation structures. The most effective approach is placing router-outlet strategically in layout components to define where routed content should appear. This provides clean separation between navigation structure and dynamic content while maintaining proper component hierarchy.
Use the router-outlet directive as a placeholder where Angular displays components based on the current route configuration.
// app.component.html
<div class="app-container">
<header class="app-header">
<nav>
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="/users" routerLinkActive="active">Users</a>
<a routerLink="/settings" routerLinkActive="active">Settings</a>
</nav>
</header>
<main class="app-content">
<!-- Primary router outlet - displays main page components -->
<router-outlet></router-outlet>
</main>
<footer class="app-footer">
<p>Application Footer</p>
</footer>
</div>
// layout.component.html (for nested routing)
<div class="layout">
<aside class="sidebar">
<nav>
<a routerLink="./overview">Overview</a>
<a routerLink="./analytics">Analytics</a>
</nav>
</aside>
<section class="content">
<!-- Named router outlet for specific sections -->
<router-outlet name="sidebar"></router-outlet>
<!-- Primary outlet for main content -->
<router-outlet></router-outlet>
</section>
</div>
// app-routing.module.ts
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: 'users', component: UsersComponent },
{
path: 'admin',
component: LayoutComponent,
children: [
{ path: 'overview', component: OverviewComponent },
{ path: 'analytics', component: AnalyticsComponent, outlet: 'sidebar' }
]
}
]
The router-outlet directive acts as a placeholder that Angular replaces with the appropriate component based on the current route. Primary outlets (unnamed) display the main route component, while named outlets allow multiple routed areas. Child routes require router-outlet in the parent component to display nested components properly.
Best Practice Note:
This router-outlet pattern is fundamental in CoreUI’s Angular templates for flexible layout management. Always include router-outlet in components that have child routes, and use named outlets for complex layouts requiring multiple dynamic content areas.
