Introduction to routing in Angular
Tags: angular, typescript
Published: 2023-02-15 01:28:59

---
title: Introduction to routing in Angular
published: true
date: 2023-02-03 00:00:00 UTC
tags: angular, typescript
canonical_url: https://www.mariokandut.com/what-is-routing-in-angular-with-basic-example/
---

> 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.**

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](https://angular.io/api/router/Router). 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](https://github.com/ngrx/router).

Let's take a look at some code examples.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#basic-routing)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

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#1-create-basic-application-with-routing-module)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';
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#2-import-routermodule-and-routes-into-routing-module)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 {}
```

### [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#3-define-and-add-application-routes)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.

## [<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>](#tldr)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](https://www.twitter.com/mariokandut)**. If you want to know more about **[Angular](https://www.mariokandut.com/tags/angular)**, have a look at these [Angular Tutorials](https://www.mariokandut.com/tags/angular).

**References (and Big thanks):**[Angular - Docs](https://angular.io/docs), [Angular Routing Guide](https://angular.io/guide/router), [Cory Rylan](https://coryrylan.com/blog/introduction-to-angular-routing)