Auxiliary routes, sometimes called secondary routes, give you a way to introduce several independent navigation paths within an Angular application, which can significantly improve how users interact with your UI. While the primary route is responsible for the main content area, auxiliary routes render secondary content alongside it without altering the primary view. This pattern is especially useful for elements such as sidebars, modal windows, or other supplementary interface components.

In Angular, any component can be associated with a single primary route, but it can also host multiple auxiliary outlets. Each of these outlets must have a unique name within its component.

Understanding Auxiliary Routes

An auxiliary route is established by placing a named router outlet in your template where the secondary content should appear. By using several of these named outlets, you can gain independent control over distinct parts of your layout.

The setup process for auxiliary routes involves a few straightforward steps.

Step 1: Set Up the Named Outlet

First, you need to declare a named outlet inside your template at the spot where you want the auxiliary content to be injected. For instance:

<div>
    <router-outlet name="pages"></router-outlet>
</div>

<!-- Primary router-outlet for main content -->
<router-outlet></router-outlet>

In the snippet above, the name="pages" outlet is the designated target for auxiliary route content. This unique outlet can be managed separately from the standard <router-outlet>, which handles the primary navigation view.

Step 2: Declare the Route Configuration

Once the named outlet is present in your template, you'll need to register the auxiliary route within your router configuration. Angular uses the outlet property in a route definition to assign it to a specific named outlet.

Here’s an example of how that configuration looks:

const routes = [
    {
        path: '',
        loadComponent: () =>
            import('./pages/homepage/homepage.component').then(c => c.HomepageComponent)
    },
    {
        path: 'experience',
        loadComponent: () =>
            import('./pages/experience/experience.component').then(c => c.ExperienceComponent),
        outlet: 'pages'  // Specify the named outlet for this route
    }
];

In this example, the empty-path primary route is responsible for loading HomepageComponent. Meanwhile, the experience path is configured as an auxiliary route, which loads ExperienceComponent into the named pages outlet.

To navigate to an auxiliary route via a template, you can use the RouterLink directive with a special grouping syntax. The URL for an auxiliary route contains a segment that defines both the primary and the auxiliary paths.

Consider the following usage:

<a [routerLink]="[{ outlets: { primary: '', pages: 'experience' } }]">Experience</a>

onNavigate(link: string) {
   this.router.navigate([{ outlets: { primary: '', pages: 'experience' } }]);
}

Here, the first segment (represented by the empty string) corresponds to the main route for the primary outlet. The second part, pages: 'experience', directs the application to display the ExperienceComponent within the pages auxiliary outlet.

Step 4: Navigate Using the Router Service

For programmatic navigation, you can also rely on Angular’s Router service. To activate an auxiliary route, you provide an array that includes commands for both the primary and secondary routes, often using an object literal to specify the outlet's name and its path.

This type of navigation call will load the homepage in the main outlet while opening the experience component in the auxiliary pages outlet.

Typical Applications

There are several common scenarios where auxiliary routes are particularly handy:

  • Sidebars: You can use an auxiliary route to display a sidebar containing links or settings without forcing the primary content to reload or change.
  • Modals and Dialogs: Auxiliary routes simplify opening and closing modal dialogs, which is great for detail views or in-place editing.
  • Additional Panels: They also work well for separate sections like chat windows, notification trays, or real-time activity feeds that need to function independently of the main page content.

Detailed Presentation

For a more in-depth explanation, you can watch the related talk video: Detailed Talk Video

Final Thoughts

Auxiliary routes in Angular provide a robust mechanism for handling different parts of an application's UI independently. By combining named router outlets with route-level configuration via the `outlet` property, you can build a more modular and user-friendly experience. This approach is particularly valuable in applications with intricate layouts, as it lets different sections of the interface function on their own terms. The end result is a more dynamic and responsive environment for the user.

Try integrating auxiliary routes in your own Angular projects to see how they can enhance navigation and interactivity, giving you greater flexibility to tailor the interface to your exact needs.