In this article, we will explore the different features of the Angular router and learn how to use it to build routing for various use cases.

Routing is one of the most important concepts when it comes to building modern 

. It is also one of the most complex topics to understand. To put it in context, let us take a little trip back in time. 🕰

Earlier generations of web apps usually had multiple HTML pages, connected together using hyperlinks. Whenever the user clicked on a link, they were navigated to a new page and the whole screen was redrawn. This was also the case with applications that used forms - the page was refreshed each time a form was submitted. ⌛️

In subsequent generations, approaches such as 

 became available. It became possible to make HTTP requests using JavaScript and update parts of the screen without having to redraw the entire page each time. This led to the rise of libraries such as 

, and eventually to modern, present-day web frameworks such as 

These frameworks are used to build Single Page Apps, which, like their name suggests, only have a single HTML page. However, they use a component called a 

 to simulate the behaviour of multi-page apps. In the upcoming sections, we will dive into how the 

 works and the various features it offers.

Before diving into the details of how to work with the Angular Router, it's worth understanding how it actually works.

Like any single page app, an Angular app has a single 

 file in which the entire app is loaded. The entry point for the app is usually the 

's template is generally used to render parts of the app that always remain on screen, such as a header bar etc. This template will also include a 

 tag. This is a special tag which Angular uses to render views that are associated with the current route. For example, if you have a 

 route, and you have set it up to show the 

The router can also be used to render multiple routes at once. This is done by having multiple router outlets, each with its own unique name. This can be useful, for instance, if you want to have a sidebar that needs to appear when the user clicks a button but has to stay on screen even after the user has navigated away.

You can either create a new project using the Angular CLI or use an existing project that you have.

If you're creating a new project, make sure to add routing to the project while creating it with the CLI.

Any new CLI project that includes routing will have an 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

This is the top-level routing module, where you can specify the routes in your application. In essence, it is the same as any other 

. The only difference is that it imports Angular's 

 static method with the defined routes array.

Any routes you would like to add into your app can be specified in the array passed to the 

 can be specified in a few different ways.

{ path: 'home', component: HomeComponent }

This is the simplest way of defining a route. It indicates that the 

 is loaded into view whenever a user navigates to the 

{
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
  } 

A route can also specify a redirect to another route. This is useful when you don't have a component that's loaded on your default(empty) route and need to direct users to a certain page when they hit your app. When specifying redirects, a 

 will match the path against the full URL, whereas 

, which is the default strategy, will stop when it finds the first match. When redirecting from the default route, 

 should be used, since the empty route will always result in a match when using 

{ path: '**', component: NotFoundComponent }

Route paths can also specify a wildcard. This path will get navigated to if the router is unable to find another match from all the other routes specified. 

A route can have other routes nested inside it via the 

{
  path: 'home',
  component: HomeComponent,
  children: [
    { path: 'settings', component: SettingsComponent }
  ]   
}

 will be rendered when the user navigates to 

Additionally, routes can also take an optional 

 property that can specify any value that needs to be passed into the component on that route.

{ path: 'home', component: HomeComponent, data: {title: 'My Home Page'} }

A common use case for most applications is dynamic routes - this means a URL that is generated on the fly using a resource ID or name - for example, 

. In this section, we will learn how to configure routes to handle this scenario.

{ path: 'people/:name', component: PersonComponent }

 token which represents a person's name. When a user navigates to 

 in the app, the router recognises it as a match with this route, and loads the 

 observable which contains the value of the 

 parameter. In the following example, we get the value of the parameter and invoke a service to fetch the person's details.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { PersonService } from './person.service';
@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent implements OnInit {
  person$: Observable<string>;
  constructor(
    private route: ActivatedRoute,
    private personService: PersonService
  ) { }

  ngOnInit() {
    this.person$ = this.route.paramMap.pipe(
      switchMap(
        (params) => this.personService.getPerson(params.get('name'))
      )
    );
  }
}


Apart from specifying them in your routing module, there are two ways to navigate between routes in your application.

 directive for use in templates. Think of this as a special type of hyperlink, or 

 tag, which links to a route inside your application. 

 property which can be used to provide a CSS class that will be applied when the link is active.

When you have a dynamic route that depends on a parameter being passed, in you can use the 

<a [routerLink]="['/people', person.name]">
  {{ person.name | titlecase }}
</a>

In this case, we will need to bind the value to the 

 using a property binding, as it uses a value from your component. The value passed into the 

 is an array of 'route link parameters' containing two items:

In case you have multiple router outlets in your app, you can also specify the particular one in which your route needs to be loaded.

The value here is slightly different - it is an object containing the key 

Listening and Responding to Router Events

Like many features of Angular, the router is also built using RxJS. It exposes an observable interface for listening to various events that occur during routing. In your app, you can subscribe to these events and execute custom logic in certain scenarios.

 that can be listened to. However, the most commonly used ones are those relating to navigation, such as 

Let us look at a practical example to understand better how to use Router Events.

A common bugbear with single-page apps is that since they only have a single HTML file, they are harder to optimise for search engines. One of the reasons for this is that the page title remains static while navigating between routes in your application. This makes it more difficult for search engines to index.

We can use Router Events to dynamically change the page titles when navigating between routes. To listen to these events, you can inject the 

 into your component's constructor, and use the following code.

this.router.events
  .pipe(filter((event) => event instanceof NavigationEnd))
  .subscribe((event) => {
    console.log(event);
  });

 operator to transform it according to your need. In this case, we are filtering out any other events and listening only to 

 is a great resource for understanding how the different RxJS operators work.

As we discovered earlier, we can pass in a 

 value as part of the route data. We can access by injecting 

 into your component and mapping the above Observable to it.

this.router.events
  .filter((event) => event instanceof NavigationEnd)
  .map(() => this.activatedRoute.data)
  .subscribe((data) => {
    console.log(data.title);
  });

Now, the only remaining part is to set the title of the page. Fortunately, Angular provides a 

 package, which does exactly what we need.

this.router.events
  .filter((event) => event instanceof NavigationEnd)
  .map(() => this.activatedRoute.data)
  .subscribe((data) => {
    this.titleService.setTitle(data.title);
  });

Another common use case for applications is guarded routes - there may be routes in your app that you only want authenticated users to access, for example. Angular has the concept of Guards, which provide a means to block navigation to a route if a certain condition is not met.

Guards are classes that implement one of two interfaces - 

 - for guarding access from a route to another route.

 guard is typically used to shield authenticated routes.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from 'auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService) { }

  canActivate(): boolean {
    return this.authService.isLoggedIn();
  }
} 

This can then be added onto a route as follows:

{
  path: 'secrets',
  component: SecretsComponent,
  canActivate: [AuthGuard]
}

 property on a route takes an array of values - so you can use multiple guards that check for different conditions to be met.

A resolver can be used to pre-fetch data that a certain route may need before getting loaded. An example of this is when navigating into a 'page' that represents a resource, such as 

, we would like to use the ID 3 to fetch the project data from the store so it can be visualised on that page.

 method. This method returns either an Observable or Promise of type 

A resolver to fetch project data will look like this:

import { Injectable } from '@angular/core';
import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable }  from 'rxjs';

import { ProjectService }  from './project.service';
import { Project } from './project';

@Injectable({
  providedIn: 'root',
})
export class ProjectResolver implements Resolve<Project> {
  constructor(private projectService: ProjectService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<Project> {
    const id = route.paramMap.get('id');
    return this.projectService.getProject(id);
  }
}

The Angular router provides a means of splitting up code into chunks so that the initial load time of the app is cut down to a minimum. Chunks that are not necessary to render the landing page are then loaded subsequently when the user navigates to the respective routes.

Previously, we saw how we can specify nested routes using the 

 property. The code associated with routes that are children of a particular route only needs to be loaded when the user navigates to that route, as it is not necessary before that. This can be achieved by separating the child components into their own 

{
  path: 'people',
  loadChildren: () => import('./people/people.module').then(m => m.PeopleModule),
} 

When the router detects a navigation to the 

In this article, we have understood how the Angular Router works. ⚙️

We have seen how you can add routes and redirects to your application, navigate between routes and inject data where necessary. 🗺

We have also learnt how to listen and respond to router events. We now know how to augment routes with guards and resolvers, and lazy-load modules using the router. 💂‍♀️

Routing is a particularly complex topic which many Angular devs find challenging. Here's hoping this article has broadened your understanding of the Angular Router! 🙌

 book by Victor Savkin is a great resource if you are looking for in-depth explanations of the Router's inner workings.

 that can help understand concepts with practical examples.

AUTHOR

Krishna Acondy

{
  path: 'home',
  component: HomeComponent
}

{
  path: '**',
  component: NotFoundComponent
}

{
  path: 'home',
  component: HomeComponent,
  data: {
    title: 'My Home Page'
  }
}

{
  path: 'people/:name',
  component: PersonComponent
}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { PersonService } from './person.service';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent implements OnInit {
  person$: Observable<string>;
  constructor(
    private route: ActivatedRoute,
    private personService: PersonService
  ) { }

  ngOnInit() {
    this.person$ = this.route.paramMap.pipe(
      switchMap(
        (params) => this.personService.getPerson(params.get('name'))
      )
    );
  }
}

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Angular Routing Explained

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript