How to Setup Routing & Navigation in Angular 16 App

In this Angular 16 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.

Simple Angular 16 Router Example

We will understand how to configure routing & navigation in Angular 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 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

cd angular-routing-tutorial

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

npm install bootstrap

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

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

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.

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 NoPageFound

Create app-routing.module.ts file and copy the components from the app.module.ts file and define in app routing class.

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

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

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})

export class AppModule {}

Here are the routes we just created in Angular.

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

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: '**', 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 Route Parameters Example

Next, we will learn how to add a router for products and product-details components with the help of Angular 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.scss']
})
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 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.scss'],
})

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 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.html file.

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-5">
  <div class="container">
    <a class="navbar-brand" href="#">Angular 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>

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

Conclusion

Finally, we have completed the Angular 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.