iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Angular, <router-outlet> marks where the router renders the component for the active route. Add one outlet for the primary route, a child outlet inside a parent component for nested views, or uniquely named outlets when separate route regions must display at the same time. The route configuration must match the outlet structure.
What does a router outlet do?
RouterOutlet is a directive that marks a location in a template where Angular can render the component selected by the current URL. Routed content is inserted after the outlet as a sibling; the outlet itself remains as the router’s reference point. See Angular’s guide to showing routes with outlets.
To use the directive, import RouterOutlet from @angular/router into the component that uses it, then add <router-outlet> to that component’s template. Define the routes and register them with the application router; Angular’s routing guide demonstrates registering routes with provideRouter(routes).
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
imports: [RouterOutlet],
template: '<router-outlet />'
})
export class AppComponent {}Standalone and NgModule applications can organize imports differently. Use the setup appropriate to your Angular version and application structure.
#1 Best Overall
How do you render a basic route?
A route associates a URL path with a component. When the URL matches, Angular displays that component in the primary outlet, whose default name is primary.
import { Routes } from '@angular/router';
import { Home } from './home';
import { About } from './about';
export const routes: Routes = [
{ path: '', component: Home },
{ path: 'about', component: About },
];Register the route array with the router, then put the outlet in the application shell template. A link using RouterLink can navigate to a route declaratively, for example <a routerLink="/about">About</a>. The Angular routing overview covers route navigation and router setup.
How do nested routes render?
Use nested routes when a parent view owns a subview that changes within it. Put the child definitions in the parent route’s children array and add another outlet to the parent component’s template. The parent can remain visible while Angular changes the component rendered in that nested region.
const routes: Routes = [
{
path: 'settings',
component: Settings,
children: [
{ path: 'profile', component: Profile },
{ path: 'security', component: Security },
],
},
];The Settings template must provide a place for its child route:
Rank #3
<h1>Settings</h1>
<nav>
<a routerLink="profile">Profile</a>
<a routerLink="security">Security</a>
</nav>
<router-outlet />Here, the child links are relative to the current route. Without the outlet in the parent template, the child route has no declared location in which to render. Angular explains this parent-and-child pattern in its route definition guide.
When should you use a named outlet?
Use a named outlet for a secondary route region that should coexist with the primary route branch—for example, a separate panel alongside the main view. Give each outlet a unique, static name, then set the matching outlet property on its route. The default outlet is named primary.
<router-outlet />
<router-outlet name="read-more" />const routes: Routes = [
{ path: 'article/:id', component: Article },
{ path: 'help', component: HelpPanel, outlet: 'read-more' },
];The route’s outlet name must match the template outlet name. Names cannot be changed dynamically, and each outlet needs a unique name. Angular can represent primary and secondary route branches together in a URL; the exact URL form depends on the route paths and outlet names. See the RouterOutlet API reference for outlet details.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteHow do you choose between nested and named outlets?
| Pattern | Use it when | How it renders |
|---|---|---|
| Nested child route | A parent view owns a subview, such as a settings section. | A child route renders in an outlet inside the parent component. |
| Named secondary outlet | A separate page region needs its own route branch alongside the primary view. | A route targeting the named outlet renders in that outlet while the primary branch can remain active. |
What can outlet events and context do?
RouterOutlet exposes lifecycle events for routed components. activate and deactivate correspond to component creation and destruction; attach and detach are associated with route reuse through RouteReuseStrategy. Use these when application behavior needs to respond to a routed component entering, leaving, or being reused. The RouterOutlet API documents the inputs and events.
The routerOutletData input can supply context specific to an outlet. A routed component can read it through ROUTER_OUTLET_DATA; if no value is provided, it is undefined. Check the API documentation for compatibility with the Angular version your application uses.
How does route order affect the rendered component?
Angular applies first-match-wins route matching. Put specific paths before broader patterns and place a wildcard route last, so it does not catch a URL intended for a more specific route. See Angular’s route definition guidance.
Quick Recap
- Define the route path and component for the primary view.
- For a nested view, add children to the parent route and an outlet to the parent template.
- For a secondary region, use a unique named outlet and a route with the matching
outletvalue. - Keep route order intentional, with broad matches and the wildcard after specific routes.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
