Understanding Auxiliary Routes in Angular

Auxiliary routes are an essential feature in Angular that allow us to render multiple views within a single component or template. In this blog post, we will explore how to use auxiliary routes in Angular and create a simple example to demonstrate their usage.

Prerequisites:

To follow along with this tutorial, make sure you have the following installed:

• Angular CLI
• Node.js

Setting Up the Project:

To get started, let’s create a new Angular project using the Angular CLI. Open your terminal and run the following command:

ng new auxiliary-routes-demo

Once the project is created, navigate into the project directory:

cd auxiliary-routes-demo

Next, let’s generate the necessary components and routing module for our example:

ng generate component home
ng generate component sidebar
ng generate component profile
ng generate module app-routing --flat --module=app

The above commands will generate the HomeComponent, SidebarComponent, ProfileComponent, and the AppRoutingModule module.

Setting Up Auxiliary Routes:

Open the app-routing.module.ts file and replace its contents with the following code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'sidebar', component: SidebarComponent, outlet: 'sidebar' },
  { path: 'profile', component: ProfileComponent, outlet: 'sidebar' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this configuration, we define three routes: the primary route 'home' associated with the HomeComponent, and two auxiliary routes 'sidebar' and 'profile' associated with the SidebarComponent and ProfileComponent respectively. The outlet property is set to 'sidebar' for both auxiliary routes.

Implementing the UI:

Now, let’s update the main component template app.component.html to include the necessary HTML elements and buttons to navigate to the auxiliary routes:

<div class="container">
  <div class="main-content">
    <router-outlet></router-outlet>
  </div>
  <div class="sidebar-content">
    <router-outlet name="sidebar"></router-outlet>
  </div>
</div>
<button (click)="goToSidebar()">Go to Sidebar</button>
<button (click)="goToProfile()">Go to Profile</button>

In the above code, we define a container element with two sections: the main-content section where the primary route component will be rendered, and the sidebar-content section where the auxiliary route components will be rendered. We also include two buttons to trigger the navigation to the auxiliary routes.

Handling Navigation:

Next, let’s update the AppComponent class in the app.component.ts file to handle the navigation:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router: Router) {}

  goToSidebar() {
    this.router.navigate([{ outlets: { sidebar: ['sidebar'] } }]);
  }

  goToProfile() {
    this.router.navigate([{ outlets: { sidebar: ['profile'] } }]);
  }
}

In the above code, we import the Router service and define two methods, goToSidebar() and goToProfile(), which use the navigate() method to trigger the navigation to the auxiliary routes.

Styling the Components:

To differentiate the primary and auxiliary route components visually, let’s add some CSS styles. Create separate CSS files for each component and add the following styles:

• sidebar.component.css:

:host {
  background-color: lightgray;
  padding: 10px;
}

• profile.component.css:

:host {
  background-color: lightblue;
  padding: 10px;
}

In these styles, we set a background color and padding to visually distinguish the sidebar and profile components.

Finalizing the Styling:

Lastly, let’s update the global CSS styles in the styles.css file to define the layout and spacing:

.container {
  display: flex;
}

.main-content {
  flex: 1;
  padding: 20px;
  background-color: white;
}

.sidebar-content {
  flex: 0 0 200px;
  padding: 20px;
}

These styles configure a flexible container layout with the main-content taking most of the space and the sidebar-content having a fixed width.

Conclusion:

In this blog post, we explored the concept of auxiliary routes in Angular and created a simple example to demonstrate their usage. We learned how to set up auxiliary routes, navigate to them, and style the components accordingly.

Auxiliary routes provide a powerful way to create more complex and flexible UI layouts in Angular applications. By utilizing multiple outlets and components, we can build dynamic and interactive user interfaces with ease.

You can find the complete code for this example on CodeSandBox.

I hope this blog post has helped you understand auxiliary routes in Angular. Feel free to experiment and expand upon this example to incorporate auxiliary routes in your own projects.

Happy coding!