<router-outlet> in Angular

<router-outlet> is a directive in Angular that acts as a placeholder in your component's template where the framework dynamically inserts the component that matches the current route.

🧩 What It Does

• It’s part of Angular’s RouterModule.
• It enables single-page application (SPA) behavior by swapping views without reloading the page.
• When the route changes, Angular renders the corresponding component inside the <router-outlet>.

📦 Basic Example

HTML:

<!-- app.component.html -->
<h1>My Angular App</h1>
<router-outlet></router-outlet>
  

TypeScript:

// app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];
  

When the user navigates to /about, Angular replaces the <router-outlet> with the AboutComponent.

🧠 Advanced Use Cases

• Named outlets: You can have multiple outlets with names like <router-outlet name="sidebar">.
• Nested routes: Child components can also have their own <router-outlet> for sub-routing.
• Lifecycle hooks: You can listen to events like (activate) and (deactivate) to track component changes.

Example with events:

<router-outlet 
  (activate)="onActivate($event)" 
  (deactivate)="onDeactivate($event)">
</router-outlet>
  

🔍 Summary

Feature	Description
Directive name	<router-outlet>
Purpose	Viewport for routed components
Location	Inside component templates
Supports	Primary and named outlets, nested routing
Events	activate, deactivate, attach, detach