Angular supports the concept of auxiliary routes, which allow you to set up and navigate multiple independent routes in a single app. 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:
import {Component} from '@angular/core';​@Component({selector: 'app',template: `<nav><a [routerLink]="['/component-one']">Component One</a><a [routerLink]="['/component-two']">Component Two</a><a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a></nav>​<div style="color: green; margin-top: 1rem;">Outlet:</div><div style="border: 2px solid green; padding: 1rem;"><router-outlet></router-outlet></div>​<div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div><div style="border: 2px solid blue; padding: 1rem;"><router-outlet name="sidebar"></router-outlet></div>`})export class AppComponent {​}
Next we must define the link to the auxiliary route for the application to navigate and render the contents.
<a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
​View Example​
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