Frontend routing is the process of navigating between different pages or views in a web application. An Angular application is a Single Page Application (SPA) that allows you to navigate between different views without reloading the application.

Part of Angular framework is the @angular/router library, which provides a way to handle routing in an Angular application. You do not need to manually install this library, as it is installed automatically when you create a new Angular project.

Like any other routing library, you’ll need to define three key concepts:

• an anchor to define where the routed content will be rendered
• a list of routes to define which content to render for a given URL
• links to trigger navigation between routes

In this tutorial, you’ll learn how to use these three concepts to navigate between different views in your Angular application.

Setting up the project

The tutorial only displays the files required to complete the lesson.

Create links

Let’s firstly define a list of links that will be used to navigate between different views.

1. Create a list of links in the app.component.html file.

   To follow semantic HTML practices, use the <a> tag.

   <nav>
     <a>Home</a>
     <a>Settings</a>
   </nav>

2. Use the routerLink directive on each link.

   The routerLink directive is a built-in directive that allows you to navigate to a different route. It takes the target url path as an argument.

   <nav>
     <a routerLink="/">Home</a>
     <a routerLink="/settings">Settings</a>
   </nav>

3. Import routerLink in the app.component.ts file.

   The routerLink directive is part of the @angular/router library, so you need to import it in your component.

   import { RouterLink } from "@angular/router";

4. Add the imported RouterLink to the component’s imports.

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

You are now done with the links. But clicking on the links won’t do anything yet, as you miss the two other key concepts: the router outlet and the routes.

Define the router outlet

The router outlet is a placeholder in your HTML template where the routed content will be rendered. It is defined using the <router-outlet> tag.

1. Add the <router-outlet> tag to the app.component.html file.

   <nav>
     <a routerLink="/">Home</a>
     <a routerLink="/settings">Settings</a>
   </nav>
   
   <router-outlet></router-outlet>

2. Import the RouterOutlet in the app.component.ts file.

   The RouterOutlet is part of the @angular/router library, so you need to import it in your component.

   import { RouterOutlet } from "@angular/router";

3. Add the imported RouterOutlet to the component’s imports.

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

You are now missing the last key concept: the routes.

Define the routes

The routes are defined in the app.routes.ts file. This file is automatically created when you create a new Angular project. It’s an empty array of objects, where each object represents a route.

We need to add 2 routes to the array:

• the home route, which will render the HomeComponent
• the settings route, which will render the SettingsComponent

1. Fill the app.routes.ts file in the src/app folder.

   import { Routes } from "@angular/router";
   
   export const routes: Routes = [
       {
           path: "home",
           component: HomeComponent,
       },
       {
           path: 'settings",
           component: SettingsComponent,
       }
   ];

Bonus

Define a root route

If you reload the preview, only the header will be displayed. That’s expected as there are routes for /home and /settings, but not for the root route /.

There are two ways to solve this:

Navigate programmatically