Recommended Free Tools
In Angular, <router-outlet> marks where the router renders the component for the active route. A basic page needs an outlet in its template and a matching route configuration. To render a view inside another view, configure child routes and add an outlet to the parent component. To show a separate route branch alongside the primary one, use a named outlet.
What an Angular router outlet does
RouterOutlet is a directive that marks a location where Angular can render the component matched to the current URL. The outlet stays in the DOM as a reference point, and the routed component is inserted after it as a sibling. It is a rendering location, not a component that represents a page by itself. Angular’s outlet guide describes this role.
As an Amazon Associate I earn from qualifying purchases.
Show a component for a basic route
For a simple route, the application needs three pieces: a route definition, router setup, and an outlet in a component template. In a standalone component, import RouterOutlet from @angular/router wherever its directive is used.
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: '<router-outlet />',
})
export class AppComponent {}Define routes with a path and the component to display, then register them with the router. Angular’s route-definition guide shows the Routes configuration pattern and application setup with provideRouter(routes). See Angular’s route definition guide.
#1 Best Overall
import { Routes } from '@angular/router';
import { Home } from './home';
import { About } from './about';
export const routes: Routes = [
{ path: '', component: Home },
{ path: 'about', component: About },
];When the URL matches /about, Angular renders About at the outlet. The exact imports and standalone or NgModule setup depend on the Angular version and application structure; follow the setup used by your project.
Render nested routes inside a parent view
Use child routes when a parent component should remain visible while one region within it changes. Put the child route definitions in the parent route’s children array, then put a second <router-outlet> in the parent component’s template. Both configuration and template outlet are needed for the child view to appear. Angular’s route guide documents the parent-and-child pattern.
const routes: Routes = [
{
path: 'settings',
component: Settings,
children: [
{ path: 'profile', component: Profile },
{ path: 'security', component: Security },
],
},
];The Settings component needs its own outlet where either child should render:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall<h1>Settings</h1>
<nav>
<a routerLink="profile">Profile</a>
<a routerLink="security">Security</a>
</nav>
<router-outlet />With a parent route active at /settings, navigating to /settings/profile renders Profile in the nested outlet while Settings remains in the parent view. The relative links shown here resolve against the current route; ensure the component also imports RouterLink or that the relevant Angular module provides it.
Rank #3
Use named outlets for a secondary route region
A named outlet is useful when a separate region should display a route branch alongside the primary route. Give each outlet a unique, static name, then set the same name in the corresponding route’s outlet property. The default outlet name is primary. Angular’s outlet guide explains named outlets and their relationship to route configuration.
<router-outlet />
<router-outlet name="read-more" />const routes: Routes = [
{ path: 'article/:id', component: Article },
{ path: 'help', component: HelpPanel, outlet: 'read-more' },
];The route targeting read-more renders in that named region; a route without an outlet property targets the primary outlet. Outlet names cannot be changed dynamically, and each name must be unique. Angular can represent primary and secondary route state together in a URL; its API reference illustrates the general shape as primary-route-path(outlet-name:route-path). See the RouterOutlet API reference.
Choose nested routes or named outlets
| Pattern | Use it when | What changes |
|---|---|---|
| Nested child route | A parent view owns a subview, such as a settings section with profile and security pages. | The parent remains active while its nested outlet renders the matching child. |
| Named outlet | A separate secondary region should coexist with the primary route, such as a panel alongside the main page. | The router targets an additional outlet by its configured name. |
For a clickable link, use RouterLink in the template. Angular also supports programmatic navigation when an interaction needs to navigate from code rather than a link. The routing overview covers both approaches, and the RouterLink API documents template navigation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Outlet events and outlet-specific context
RouterOutlet exposes events for changes to the component it renders. activate fires when a routed component is activated, and deactivate when it is deactivated. attach and detach are associated with a RouteReuseStrategy reusing a stored route component rather than creating or destroying it normally. The RouterOutlet API reference lists these outputs.
The routerOutletData input can provide context specific to an outlet. The rendered component can read that value through ROUTER_OUTLET_DATA; if no value is supplied, it is undefined. This is useful when the same routed component needs to know which outlet context it is being rendered in. Consult the API reference for the current API details and your installed Angular version.
Route ordering and common outlet mistakes
Angular uses first-match-wins route matching. Put more specific routes before broader routes and keep a wildcard route last; otherwise, a broad or wildcard entry can match before the route you intended. Angular’s route definition guide explains route ordering.
- Child route configured, but nothing appears: check that the parent component template includes its own
<router-outlet>. - Child page replaces the whole screen: verify that the child route is under the parent’s
childrenand that navigation matches the intended nested path. - Named route does not render in the expected region: make sure the template outlet’s name matches the route’s
outletvalue exactly, and that the name is unique and static. - An intended route never matches: check whether an earlier, broader route catches the URL first.
Angular’s current documentation pages do not pin these explanations to a specific framework release. Confirm API details—particularly outlet contextual data—against the Angular version used by your application.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsQuick Recap
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.
