How to Use router-outlet in Angular: Simple Guide

In Angular, use the router-outlet directive as a placeholder in your template where routed components will appear. It works with Angular Router to load components based on the current URL path.

Syntax

The router-outlet is a directive placed in your component's template. It marks where Angular should insert the component matched by the current route.

Basic syntax:

• <router-outlet></router-outlet>: Default outlet for routed components.
• You can also name outlets for multiple views using name attribute, e.g., <router-outlet name="sidebar"></router-outlet>.

html

<router-outlet></router-outlet>

Output

Displays the routed component inside this placeholder.

Example

This example shows a simple Angular app with two routes: Home and About. The router-outlet in AppComponent loads the component matching the URL.

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: '<h2>Home Page</h2><p>Welcome to the home page!</p>'
})
export class HomeComponent {}

@Component({
  selector: 'app-about',
  template: '<h2>About Page</h2><p>Learn more about us here.</p>'
})
export class AboutComponent {}

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a> |
      <a routerLink="/about" routerLinkActive="active">About</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  styles: ['nav a.active { font-weight: bold; }']
})
export class AppComponent {}

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

@NgModule({
  declarations: [AppComponent, HomeComponent, AboutComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule {}

Output

<nav>Home | About</nav>

<h2>Home Page</h2>
<p>Welcome to the home page!</p>

Common Pitfalls

1. Forgetting to add RouterModule to your module imports: Without this, router-outlet won't work.

2. Missing routes configuration: If routes are not defined properly, no component will load.

3. Using router-outlet outside of a routed component: It must be inside a component that is part of the routing tree.

4. Not using routerLink or navigating programmatically: The outlet updates only when the route changes.

typescript

/* Wrong: Missing RouterModule import */
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule], // RouterModule.forRoot(routes) missing
  bootstrap: [AppComponent]
})
export class AppModule {}

/* Right: Include RouterModule with routes */
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  bootstrap: [AppComponent]
})
export class AppModule {}

Quick Reference

• <router-outlet>: Placeholder for routed components.
• RouterModule.forRoot(routes): Sets up routes in your app module.
• routerLink: Directive to navigate between routes.
• routerLinkActive: Adds CSS class when link is active.
• Named outlets allow multiple router outlets in one template.

Key Takeaways

Place router-outlet in your template to show routed components dynamically.

Always import RouterModule with your routes in the app module.

Use routerLink to navigate and update the outlet content.

Named outlets let you display multiple routed views in one page.

Check routes and module setup if components do not render inside router-outlet.