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)
Using router-outlet enables dynamic view rendering in Angular applications, allowing different components to be displayed based on the current route. As the creator of CoreUI with 25 years of development experience, I’ve implemented complex routing systems in numerous Angular enterprise applications. The most effective approach uses router-outlet as a placeholder where Angular dynamically loads routed components. This pattern enables single-page application navigation with clean URL structures and component-based architecture.
Place <router-outlet></router-outlet> in your template to dynamically render routed components.
// app.component.html
<div class="app-layout">
<nav class="navbar">
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/contact">Contact</a>
</nav>
<main class="content">
<router-outlet></router-outlet>
</main>
</div>
// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { HomeComponent } from './home/home.component'
import { AboutComponent } from './about/about.component'
import { ContactComponent } from './contact/contact.component'
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
The router-outlet directive acts as a dynamic component placeholder where Angular renders the component associated with the current route. When users navigate using routerLink or programmatically, Angular destroys the current component and creates the new one in the outlet. The routing configuration maps paths to components, enabling clean navigation architecture.
Best Practice Note:
This is the same routing foundation we implement in CoreUI Angular templates for scalable navigation systems. Use named outlets for multiple router-outlets and implement route guards for protected routes to enhance your application’s navigation security.
