Component-based routing in Angular 17

In this article, you will learn the basics of routing for Angular 17 or newer versions. Before we begin, ensure that Node.js and Angular are installed on your system.

What is Routing?

Routing is a mechanism used in single-page applications (SPAs) to manage the process of navigating from one view to another without reloading the entire application. In traditional web applications, when you navigate to a new page, the browser sends a request to the server, which then sends back a new HTML page. This causes the page to reload.
Angular, on the other hand, uses a different approach called PathLocationStrategy for routing. This method changes the URL in the browser using the HTML5 History API without sending a new request to the server and without reloading the page. This makes navigation faster and smoother for the user.

Generate an application

The following command uses the Angular CLI to generate a basic Angular application with application name routing-app

ng new routing-app

Add Components for Routing

After creating the angular application navigate to your app directory and generate components. At least two components are needed to navigate from one to another.

cd routing-app
ng generate component first
ng generate compoenet second

Implement Routing

1. Define Routes

• Setup ‘Routes’ array for your routes
  The Routes array is a collection of objects where each object contains information about different routes. Typically, the initial setup for this array is generated in the app.routes.ts file when you create a new Angular project using the Angular CLI.
  

import { Routes } from '@angular/router';
export const routes: Routes = [];

• Import Components
  Each route in the Routes array is a JavaScript object that contains at least two properties:
  1. path: This property defines the URL path for the route.
  2. component: This property defines the Angular component to be displayed when the route is accessed.
  

import { Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
export const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent }
];

The order of routes is important because the Router uses a first-match wins strategy

2. Add Routes to your Application

After Defining the route you need to add them to your application. We will create a navigation bar (navbar) that allows users to navigate between different views in an Angular application

• Set Up the Navbar
  In the app.component.html, we create a navbar that uses Angular’s routerLink to navigate between components.

<h1>Angular Router App</h1>
<nav>
  <ul>
    <li><a routerLink="/first-component" routerLinkActive="active" ariaCurrentWhenActive="page">First Component</a></li>
    <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a>
    </li>
  </ul>
</nav>
<!-- The routed views render in the <router-outlet> -->
<router-outlet></router-outlet>

• Update the AppComponent
  We need to import the necessary Angular router directives and configure the AppComponent.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'routing-app';
}

• Explanation of Navabar code:
  routerLink: Directive that creates a link to a specified route within a single-page application (SPA). Unlike traditional <a href=”…”> links, routerLink navigates within the application without causing a full-page reload
  routerLinkActive: Directive that adds a CSS class (active) when the link’s route is active.
  ariaCurrentWhenActive="page": Sets ARIA attributes to indicate the current active page for accessibility.
<router-outlet></router-outlet>: This directive is a placeholder where the routed component view will be displayed.

Now, users can navigate between different routes in your Angular application by clicking the links in the navbar, providing a seamless and efficient user experience.

Conclusion

To wrap up, Angular 17’s component-based routing simplifies navigation in single-page applications by avoiding full-page reloads and offering a faster, smoother user experience. With just a few steps—defining routes, setting up components, and configuring a navigation bar—you can implement seamless routing in your app. This approach enhances both development efficiency and the overall user interface. Whether you’re working on a small project or scaling up, mastering routing in Angular is an essential step for creating modern, dynamic web applications.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.