Angular 10/9/8 Router Tutorial – Configure Routing & Navigation

Last updated on by Digamber
In this Angular 10/9/8 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 10/9/8 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 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 10/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 10/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.

URLComponent
http://localhost:4200/homeHomeComponent
http://localhost:4200/aboutAboutComponent
http://localhost:4200/productsProductsComponent
http://localhost:4200/product-detail/:idProductDetailComponent
http://localhost:4200/contactContactComponent

Angular 10/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 10/9 Wildcard Route

Angular 10/9/8 Route Parameters

Next, we will learn how to add a router for products and product-details components with the help of Angular 10/9/8 route parameters or params. Here we will create a product-details route with id parameter. There are many ways to locate parameters in Angular 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 10/9 Route Parameter with ActivatedRoute

We learned in the previous how to send parameters in the Angular router and create dynamic routes. Now, we will use the Activated route API to get the route parameter in an Angular 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 10/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 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 10/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.