Router outlet for view rendering in Angular

Introduction

A router outlet is a placeholder in your app where Angular shows different views based on the URL. It helps switch pages without reloading the whole app.

You want to show different pages inside the same app layout.

You need to change content when users click links or buttons.

You want to build a single-page app that feels fast and smooth.

You want to organize your app into smaller parts or components.

You want to keep navigation simple and automatic.

Syntax

Angular

<router-outlet></router-outlet>

Place in your main component's template where you want views to appear.

Angular replaces with the component matching the current route.

Examples

Basic router outlet in your main app component template.

Angular

<router-outlet></router-outlet>

Router outlet inside a div to style or layout the view area.

Angular

<div class="content">
  <router-outlet></router-outlet>
</div>

Named router outlet to show a specific view in a different place, like a popup.

Angular

<router-outlet name="popup"></router-outlet>

Sample Program

This Angular app has two pages: Home and About. The <router-outlet> shows the page that matches the URL. Clicking links changes the URL and the view updates without reloading.

Angular

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

@Component({
  selector: 'home-page',
  standalone: true,
  template: `<h2>Home Page</h2><p>Welcome to the home page!</p>`
})
class HomePage {}

@Component({
  selector: 'about-page',
  standalone: true,
  template: `<h2>About Page</h2><p>Learn more about us here.</p>`
})
class AboutPage {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <nav>
      <a routerLink="/" aria-label="Go to Home">Home</a> |
      <a routerLink="/about" aria-label="Go to About">About</a>
    </nav>
    <router-outlet></router-outlet>
  `
})
class App {}

bootstrapApplication(App, {
  providers: [
    RouterModule.forRoot([
      { path: '', component: HomePage },
      { path: 'about', component: AboutPage }
    ])
  ]
});

Important Notes

Always include RouterModule in your app to use routing features.

Use routerLink directive on links to change routes without page reload.

You can have multiple router-outlet elements with names for complex layouts.

Summary

Router outlet is where Angular shows the page content based on the URL.

It helps build smooth single-page apps by swapping views inside the app.

Use <router-outlet> in your template and configure routes to connect URLs to components.