Auxiliary Routes in Angular

In this article, we’ll explore how auxiliary routes work, how to define and set up named router outlets, and the best practices for implementing them in Angular applications.

What are Auxiliary Routes?

Auxiliary routes, also known as secondary routes, allow you to add multiple independent routes to your Angular application, enhancing your app’s navigation and interaction capabilities. Unlike primary routes, which determine the main content of the page, auxiliary routes work as secondary content that can appear alongside the primary content without disrupting the user’s main view. They are typically used for components like sidebars, modals, or any additional section of the interface.

Each component in Angular can have one primary route and any number of auxiliary outlets, which must have unique names within the component.

Setting Up Auxiliary Routes

To define an auxiliary route, you’ll need to create a named router outlet in the template where you want the content for the auxiliary route to render. By setting up multiple outlets in this way, you can manage different parts of the UI independently.

Here’s a step-by-step guide on setting up auxiliary routes in Angular.

Step 1: Define the Named Router Outlet

To use an auxiliary route, start by adding a named outlet in your template where you want the secondary route content to display. For example:

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

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

Here, is a named outlet where the auxiliary route content will render. It can display separate route content independently of the main router outlet, , which is typically used for primary navigation.

Step 2: Configure Auxiliary Routes in the Router

After setting up the named outlet in the template, define your auxiliary route in the router configuration. Angular uses the outlet property in the route definition to specify which outlet the route should render in.

Here’s an example:

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 primary route (empty path) loads HomepageComponent.
The experience path is an auxiliary route that loads ExperienceComponent into the pages outlet.

Step 3: Navigating to Auxiliary Routes

To navigate to an auxiliary route, use Angular’s RouterLink directive with a specific syntax. Auxiliary routes require a segmented URL structure, which specifies both the primary and auxiliary paths.

For example:

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

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

Here, primary corresponds to the main content path (in this case, an empty path for the homepage), and pages: 'experience' sets the auxiliary route for the named outlet pages.

Step 4: Accessing Auxiliary Routes Programmatically

You can also navigate to auxiliary routes programmatically using Angular’s Router service. To set an auxiliary route, specify both the primary and secondary route paths in an object passed to the navigate method.

This code navigates to the homepage in the primary outlet and opens the ExperienceComponent in the pages auxiliary outlet.

Common Use Cases

Sidebars: Use an auxiliary route to toggle a sidebar with links or settings without disrupting the primary content.
Modals and Dialogs: Auxiliary routes make it easy to open and close modals, allowing users to view details or edit information in a dialog.
Chat or Notifications Panels: Displaying live chats, notifications, or real-time feeds independently of the main content.

Detailed Talk Video:

Conclusion

Auxiliary routes in Angular offer a flexible way to manage multiple sections of an application independently. By defining named router outlets and configuring routes with the outlet property, you can create a seamless and modular user experience. Auxiliary routes are especially beneficial for applications with complex UI structures, as they allow parts of the interface to operate independently. With this setup, you can provide users with a more engaging and responsive experience.

Experiment with auxiliary routes in your Angular projects to see how they can transform your app’s navigation and interactivity, and tailor the UX to fit your specific requirements.

Comments

[MrNizzy]

I didn't know you could do that with the outlets, I'll try it, thanks ✨.