Using Auxiliary Routes
Angular supports the concept of auxiliary routes, which allow you to set up and navigate multiple independent routes in a single app. Auxiliary routes allow the user to access or toggle portions of the page, such as a side-bar or dialog, using the URL.
Each component has one primary route and zero or more auxiliary outlets. Auxiliary outlets must have unique name within a component.
To define the auxiliary route we must first add a named router outlet where contents for the auxiliary route are to be rendered.
Here's an example:
1
import {Component} from '@angular/core';
2
3
@Component({
4
selector: 'app',
5
template: `
6
<nav>
7
<a [routerLink]="['/component-one']">Component One</a>
8
<a [routerLink]="['/component-two']">Component Two</a>
9
<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
10
</nav>
11
12
<div style="color: green; margin-top: 1rem;">Outlet:</div>
13
<div style="border: 2px solid green; padding: 1rem;">
14
<router-outlet></router-outlet>
15
</div>
16
17
<div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
18
<div style="border: 2px solid blue; padding: 1rem;">
19
<router-outlet name="sidebar"></router-outlet>
20
</div>
21
`
22
})
23
export class AppComponent {
24
25
}
Copied!
Next we must define the link to the auxiliary route for the application to navigate and render the contents.
1
<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">
2
Component Aux
3
</a>
Copied!
Each auxiliary route is an independent route which can have:
    its own child routes
    its own auxiliary routes
    its own route-params
    its own history stack
Last modified 5mo ago
Copy link