34. Understanding the Router Outlet

The <router-outlet> directive acts as a placeholder where Angular dynamically loads and displays the component corresponding to the current URL.

Multiple Router Outlets (Named Outlets)

Most applications use a single primary outlet (the unnamed outlet) in app.component.html for main page content. However, Angular supports multiple, named outlets to manage secondary navigation areas (e.g., sidebars, popups, footers) independently.

1. Defining the Named Outlet

html

2. Configuring the Route

Routes that target a named outlet must specify the outlet property.

typescript const routes: Routes = [ { path: 'home', component: HomeComponent },

// This component will render inside the 'sidebar' outlet { path: 'help', component: HelpSidebarComponent, outlet: 'sidebar' } ];

3. Navigation to Named Outlets

To navigate to a named outlet, you must specify it in the path array using the outlet notation.

html

<a [routerLink]="[{ outlets: { sidebar: ['help'] } }]">Show Help Sidebar

this.router.navigate([ { outlets: { sidebar: ['help'] } } ]);

Named outlets allow complex UIs where two independent route segments are active simultaneously (e.g., the main /dashboard component and a secondary /settings(sidebar:profile-preview) component).