`<router-outlet>`

Placeholder where the router renders the component for the active route.

Since Angular 2+ Spec ↗

Syntax

<router-outlet></router-outlet>

Parameters

Name	Type	Required	Description
`name`	`string`	No	Optional name for a secondary (named) outlet.

Returns

directive — Renders the matched route component.

Examples

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <nav><!-- links --></nav>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {}

Notes

Import RouterOutlet. The router instantiates the matched route's component as a sibling after the outlet element. Nested outlets enable child routes; named outlets render auxiliary routes. Listen to (activate)/(deactivate) for lifecycle hooks.