Introduction to routing in Angular

This article is based on Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3

Routing in Angular is used to navigate from one view to another as users perform actions.

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

In an SPA (Single-Page-Application) you can conditionally show or hide components depending on user actions, at some point users will perform an action which requires to move to a different view in the application. To handle the navigation from one view to another you have to use routing, most commonly the @angular/router, see Router API. Routing plays a crucial role in making an SPA dynamic and user-friendly. It's what makes your application feel like a native app instead of a loose collection of separate pages (think of internet of the 90ies).

The Router enables navigation by interpreting a browser URL as an instruction to change the view. Also, additional parameters can be passed to be handled in the view component.

Some examples of actions, which involve routing:

• Entering a URL in the address bar and the browser navigates to a corresponding page within the Angular application
• Clicking on a link, which navigates to a new page
• Clicking on a product image to go to the product details page
• Clicking the back or forward button in the browser to trigger browser navigation

The Angular router is the package @angular/router, when scaffolding an application with the Angular CLI ng new YOUR_TEST_APP, you will get prompted if you want to use the angular router. This tutorial is based on @angular/router. If you don't want to use @angular/router, there are some other options, for example ngrx/router.

Let's take a look at some code examples.

Basic routing

We are going to create a basic application with two components and two routes.

The steps are:

1. Create basic application with routing module
2. Import Routermodule and Routes into routing module
3. Define and add application routes

1. Create basic application with routing module

Let's create a new Angular app, and we call it my-routing in a folder angular-routing.

mkdir angular-routing
cd angular routing
ng new my-routing --routing --defaults

The command ng new ... uses the Angular CLI to generate a basic Angular application with an AppRoutingModule (application routing module). The AppRoutingModule is an NgModule where you can configure your routes.

Now let's add two components, so we can route to them. In the same folder generate two components via CLI.

ng generate component first
ng generate component second

Open the AppRoutingModule (file: app-routing.module.ts) and import the two components.

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

2. Import Routermodule and Routes into routing module

The importing of the Routermodule into the Angular AppModule was already done by the Angular CLI. If you are creating your application manually, or you don't have the Angular CLI, you have to add the imports.

Your app-routing.module.ts should look something like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

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

Now add your routes array, which will contain all the valid routes for your app:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [];

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

3. Define and add application routes

Let's define our routes. We have two components first and second, so we are adding two routes.

Replace the routes with:

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

We have now defined our application routes. Start the application ng serve and go to http://localhost:4200/first-component. The first component should render.

Let's remove the Angular welcome screen and add a navigation for the two components.

To do so, open app.component.html and remove everything. We are going to add the navigation and the router-outlet. The router-outlet is a placeholder that Angular dynamically fills based on the current router state. Basically, Angular uses this to insert the component matched by the route.

<h1>My Angular Routing 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>

<router-outlet></router-outlet>

Now start your Angular app again, and you should see a headline with two buttons. Click the buttons and see how the component gets rendered and your URL changes.

TL;DR

• Routing is the mechanism that allows you to create different pages within your Angular application without reloading the entire page.
• A router array in AppRoutingModule holds all the routes.
• The router-outlet is used by Angular to insert the component matched by the route.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut. If you want to know more about Angular, have a look at these Angular Tutorials.

References (and Big thanks): Angular - Docs, Angular Routing Guide, Cory Rylan