Routing allows your application to change views and navigate between different components without reloading the entire page. It improves the user experience by providing seamless transitions between views.

With routes, you can lazy-load specific components, meaning you can load only the necessary sections of code when required, which improves performance and reduces initial load time.

Here is the step-by-step guide to implementing basic routing in Angular:

Step 1: Set up an Angular Project

Angular 18 comes with routing by default. You don’t need to configure it manually, as it does this by default.

To set up a new project, you must first install the AngularCLI and create a new project.

If you have not installed AngularCLI, then you can install it using the command below:

npm install -g @angular/cli

Now, you can create a new Angular project using the command below:

ng new routing-app

Now go inside the project folder “routing-app” and open the folder in your favorite code editor:

If you navigate to the src/app folder, you will see a file called app.routes.ts file like this:

import { Routes } from '@angular/router';

export const routes: Routes = [];

This file comes by default with a new project with the above code.

The app.routes.ts file is registered in the Angular application, and if you want to see that, open the src/app/app.config.ts file:

import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideAnimationsAsync(),
  ],
};

This is an Angular configuration file. We passed the routes in this file using the provideRouter() function.

Now, this configuration file src/app/app.config.ts is used in the src/app/main.ts file:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

This bootstrap application file loads when the Angular project boots up.

Step 2: Install Angular Material

This step is optional, and you don’t need to install it, but for this project, I want some styling, so I am installing it using the command below:

ng add @angular/material

Import the two necessary material modules in the src/app/app.component.ts file that will help us style our project:

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

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatToolbarModule, MatButtonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {}

Step 3: Adding components for routing

Our application needs at least two components to navigate between them, and at least one of each component to use the Angular router.

To create a component using the CLI, enter the following at the command line:

ng generate component home

It will create a home folder inside the src/app directory, and in the home directory, you will have these files:

1. home.component.css
2. home.component.html
3. home.component.spec.ts
4. home.component.ts

Now, create another component called about using the below command:

ng generate component about

It will create an about folder with the above files, except the name will be “about.”

Step 4: Importing new components

After creating two new components, we must import them into the src/app/app.routes.ts file for routing.

// app.routes.ts

import { Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

export const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

Here, we declare the Routes array.

Each route in this array is a JavaScript object that contains two properties.

The first property, path, defines the URL path for the route.

The second property, component, defines the component Angular should use for the corresponding path.

The third property, called “redirectTo”, indicates which route you want to redirect to. The fourth is “pathMatch”.

Step 5: Adding routes to our application

First, we defined the routes for our routing application. Now, we need to use them for our application.

First, add links to the two components.

Assign the anchor tag that you want to add the route to the routerLink attribute.

Set the value of the attribute to the component to show when a user clicks on each link.

Next, update the app.component.html template to include the <router-outlet> tag. This element informs Angular to update the application view with the component for the selected route.

Write the following code inside the src/app/app.component.html file:

<mat-toolbar color="primary">
  <span>My Application</span>
  <span class="spacer"></span>
  <a mat-button routerLink="/home">Home</a>
  <a mat-button routerLink="/about">About</a>
</mat-toolbar>

<router-outlet></router-outlet>

Also, import the RouterLink and RouterLinkActive modules into the src/app.component.ts file:

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    MatToolbarModule,
    MatButtonModule,
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {}

Step 6: Run the routing application

Go to the terminal and start the development server using this command:

ng serve --open

If you click on the About link, it will display the about component like this:

That’s all!