Angular 9 Router Tutorial – Configure Routing & Navigation

By Digamber Rawat Last updated on
In this Angular 9 router tutorial, we will learn how to enable routing & navigation service in an Angular app. Routing allows users to navigate between one component to another component based on action taken by the user.

Routing is a mechanism in modern web or mobile applications, be it single-page applications, progressive web applications, or mobile apps. A user can fetch content in the view based on the component a user wants to navigate. It can also be directly done by using the route URL in the browsers.

We will understand how to configure routing & navigation in Angular 8/9 and will get started by installing a simple Angular app with some components, then we will find the answers for following questions:

  • How to configure routing & navigation in Angular 8/9 with built-in APIs?
  • How to import and configure the routing module in the main AppModule?
  • How to implement an active class with a routerLink directive?
  • How to enable routes for specific components?
  • How to use router-outlet directive to enable views based on related component?
  • How to configure wild card routes in Angular?
  • How to Send/Get Parameters?

Install Angular 9 Project

Run command to install Angular project for Angular Router demo.

ng new angular-routing-tutorial

# ? Would you like to add Angular routing? Ye
# ? Which stylesheet format would you like to use? CSS

“Would you like to add Angular routing?” By selecting Yes to this question. Angular CLI will add app-routing.module.ts file in Angular project. In this file we will define all the routing configuration.

cd angular-routing-tutorial

Install Bootstrap, we will use Bootstrap 4 UI components for the demo purpose.

npm install bootstrap

Place bootstrap.min.css file path in the styles array in package.json:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Check Angular 9 routing app by entering http://localhost:4200 url in the browsers address bar.

ng serve --open

Configure Routes & RouterModule

Before we configure routes in Angular, we have to have a look on the app’s navigation architecture and install the components based on the diagram.

Angular 9 Routing Example
As per the app, architecture create the components by using the Angular CLI command in the terminal.

ng generate component home
ng generate component about
ng generate component contact
ng generate component products
ng generate component product-detail
ng generate component product-detail
ng generate component NoPageFound

In AppRoutingModule Routes and RouterModule service are responsible for enabling routing service in Angular.

import {Routes, RouterModule} from "@angular/router";

Head over to app-routing.module.ts and import the components for which routing has to be configured.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ProductsComponent } from './products/products.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { ContactComponent } from './contact/contact.component';
import { NoPageFoundComponent } from './no-page-found/no-page-found.component';

Here, define the path of the route using the Angular components. Here in the path: "..." insert your route name.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'product-detail/:id', component: ProductDetailComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: NoPageFoundComponent }
];

Here are the routes we just created in Angular 8/9.

URL Component
http://localhost:4200/home HomeComponent
http://localhost:4200/about AboutComponent
http://localhost:4200/products ProductsComponent
http://localhost:4200/product-detail/:id ProductDetailComponent
http://localhost:4200/contact ContactComponent

Angular 9 Route Matching Strategies

Angular offers prefix and full route matching strategies. These are built-in route matching mechanism to identify if the existing browser’s URL is prefixed with the path.

pathMatch: 'full' signifies that the complete URL path requires to be matched and is utilized by the route matching mechanism.

In the below example, we are redirecting to the /home component and matching the empty path using the pathMatch: ‘full’ property.

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

The redirectTo property helps you redirect to the specified path if the particular route is matched.

pathMatch: 'prefix' indicates, If the route matching strategy of a particular route is set to prefix, In this case, the router identifies if the starting URL in the browser is prefixed with the route’s path, and it gets the associated component.

Here we are checking if the current URL in the browser prefixed with the path.

{ path:  'about', pathMatch: 'prefix', component:  AboutComponent}

Wildcard Route in Angular 8/9

If the user lands on the page, which doesn’t exist in the app, to get rid of this problem, we can redirect the user to the 404 page. Fortunately, to sort out this issue, we have a wildcard route in Angular. It can be done quickly bypassing double asterisk, and it can be written something like this path: "**" here is how you set wildcard route in routes array, check out the example below.

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'product-detail/:id', component: ProductDetailComponent },
  { path: 'contact', component: ContactComponent },

  { path: '**', component: NoPageFoundComponent }
];

Setting up wildcard route in Angular is simple, you have to create a component first and let’s call it NoPageFoundComponent or whatever you and then import in the app-routing.module.ts file:

Go to no-page-found.component.html and add the following HTML code in it and then enter some random wrong name in the browser’s address bar.

<div class="col-md-12">
    <div class="error-template">
        <h3>Oops!</h3>
        <h2>404 Not Found</h2>
        <div class="error-details mb-3">
            Sorry, Requested page not found!
        </div>
        <div class="error-actions">
            <a routerLink="/home" class="btn btn-danger btn-lg">
                Go Back to Home
            </a>
        </div>
    </div>
</div>

Angular 9 Wildcard Route

Angular 9 Route Parameters

Next, we will learn how to add a router for products and product-details components with the help of Angular 8|9 route parameters or params. Here we will create a product-details route with id parameter. There are many ways to locate parameters in Angular 9 Router.

Here is the quick look of the code we added in the app-routing.module.ts.

import { ProductsComponent } from './products/products.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';

const routes: Routes = [
  { path: 'products', component: ProductsComponent },
  { path: 'product-detail/:id', component: ProductDetailComponent }
];

Next, go to products.component.ts file and add the products array.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {

  Products = [
    {
      id: "ABC8441189035",
      name: "Tshirt",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      id: "DEF6510463347",
      name: "Shoes",
      description: "Proin ac metus in diam porttitor viverra eu sit amet ligula."
    },
    {
      id: "GHI0831819467",
      name: "Handbags",
      description: "Duis sodales dui vitae urna varius, at ullamcorper purus tempor."
    }
  ]

  constructor() { }

  ngOnInit() { }

}

Now, let’s understand what does the below code mean. We are passing the id parameter in the [routerLink]="..." route and sending the data to the params. When the user clicks on the product then the user will be redirected to associated id product in the product-details page.

<a [routerLink]="['/product-detail/', products.id]" class="btn btn-danger">Check Product</a>

Next, go to products.component.html file and add the following code.

<div class="row">
    <div class="col-sm-4" *ngFor="let products of Products">
        <div class="card mb-3">
            <div class="card-body">
                <h5 class="card-title">{{products.name}}</h5>
                <p class="card-text">{{products.description}}</p>
                <a [routerLink]="['/product-detail/', products.id]" class="btn btn-danger">Check Product</a>
            </div>
        </div>
    </div>
</div>

GET Angular 9 Route Parameter with ActivatedRoute

We learned in the previous how to send parameters in the Angular 9 router and create dynamic routes. Now, we will use the Activated route API to get the route parameter in an Angular 9 app.

Go to product-detail.component.ts and add the below code in it.

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

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})

export class ProductDetailComponent {
  product_id: string;

  constructor(private actRoute: ActivatedRoute) {
    this.product_id = this.actRoute.snapshot.params.id;
  }
}

Here we imported the ActivatedRoute service and set the product_id variable. Then injected the ActivatedRoute service in the constructor and used the snapshot.params.id with the help of ActivatedRoute and assign the id parameter to the product_id variable.

Next, go to product-detail.component.html file and add the below code, this will show the associated product id when the user visit the product-details page.

<h5 class="card-title">Product Id is: {{product_id}}</h5>

Angular 9 Router Outlet & Navigation Directives

The Router-Outlet directive allows components to display data dynamically based on the existing browser’s URL or path. It can be added inside the app.component.ts file, and multiple router outlets can be placed in an Angular 9 app for fulfilling the advanced routing cases. We are using the Bootstrap container class and wrapping the router-outlet in it.

<div class="container text-center">
  <router-outlet></router-outlet>
</div>

Configure Routes with Navigation Directives

To configure the routers in Angular and active class, we have routerLink and routerLinkActive directives, check out below how we used both the navigation directives in app.component.ts file.

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
  <div class="container">
    <a class="navbar-brand" href="#">Angular 9 Routing Tutorial</a>

    <ul class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/products">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" routerLink="/contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container text-center">
  <router-outlet></router-outlet>
</div>

Conclusion

Finally, we have completed the Angular 9 Router tutorial in which we learned how to configure routing and navigation service, get and send parameter, wildcard routing from scratch. For this tutorial, you can found the complete source code in my GitHub repo.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Thanks for checking this tutorial out :) Let me know if you have any suggestions or issue related to this tutorial, or you want to request a new tutorial. Just shoot me a mail here.