33. Auxiliary Routes (Named Routes)

Auxiliary routes in Angular allow you to load multiple independent routes into different parts of the page at the same time. This feature is useful when you want to manage multiple sections of your page independently, like a side navigation menu, a modal, or a pop-up without affecting the primary content.

Key Points:

• Primary Route: This is the default route that loads in the main <router-outlet>.
• Auxiliary Route: These are additional routes that load into different <router-outlet> elements, often used for features like sidebars, popups, or modal dialogs.

Each component has one primary outlet and can have multiple auxiliary outlets.

Example Setup

Step 1: Define the Routes in app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ModalComponent } from './modal/modal.component';
 
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'home', // Primary route
    component: HomeComponent,
    children: [
      { path: 'sidebar', component: SidebarComponent, outlet: 'sidebar' },  // Auxiliary route for sidebar
      { path: 'modal', component: ModalComponent, outlet: 'modal' },          // Auxiliary route for modal
    ]
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },  // Default route
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 2: Set Up the Primary and Auxiliary <router-outlet>

In the main component (app.component.ts), we define one primary <router-outlet> and two auxiliary outlets: one for the sidebar and one for the modal.

app.component.html:

<div>
  <h1>Welcome to the Home Page</h1>
  
  <!-- Primary outlet for main content -->
  <router-outlet></router-outlet>
 
  <!-- Auxiliary outlet for sidebar (named 'sidebar') -->
  <router-outlet name="sidebar"></router-outlet>
 
  <!-- Auxiliary outlet for modal (named 'modal') -->
  <router-outlet name="modal"></router-outlet>
</div>

Step 3: Create the Components

home.component.ts:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-home',
  template: `
    <h2>Home Page</h2>
    <p>Content for the home page.</p>
    <a [routerLink]="[{ outlets: { sidebar: ['sidebar'], modal: ['modal'] } }]">Open Sidebar & Modal</a>
  `
})
export class HomeComponent {}

sidebar.component.ts:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-sidebar',
  template: `<div style="background-color: lightgray; padding: 10px;">This is the Sidebar</div>`
})
export class SidebarComponent {}

modal.component.ts:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-modal',
  template: `<div style="background-color: lightblue; padding: 20px;">This is the Modal</div>`
})
export class ModalComponent {}

Step 4: Add Auxiliary Route Navigation

In HomeComponent, you can navigate to the auxiliary routes by specifying them in the routerLink.

<a [routerLink]="[{ outlets: { sidebar: ['sidebar'], modal: ['modal'] } }]">Open Sidebar & Modal</a>

Conclusion:

This is how you can use auxiliary routes or named routes in Angular. It allows you to have multiple independent parts of your page that can be controlled via the URL. In this example, both the sidebar and the modal are loaded at the same time as part of the URL, without affecting the primary content.