Angular 14 – Four Methods to Navigate to the Previous Page with Back Button

In this tutorial, we will be discussing the different methods for adding a back button in an Angular application to navigate to the previous page. The back button is a useful feature that allows the user to easily navigate back to the previous page, which can improve the user experience of your application.

We will be discussing four different methods for adding a back button in Angular:

1. Using the location.back() method
2. Using the router.navigate() method
3. Using the Location service
4. Using the routerLink directive

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js
• Angular CLI

Method 1: Using the location.back() method

The location.back() method is a built-in JavaScript method that allows you to navigate back to the previous page. To use this method, you can create a back button in your template and bind it to a method in your component that calls the location.back() method.

Example:

In your component:

goBack() {
  window.history.back();
}

In your template:

<button (click)="goBack()">Back</button>

Method 2: Using the router.navigate() method

The router.navigate() method is a built-in Angular method that allows you to navigate to a specific route in your application. To use this method, you can create a back button in your template and bind it to a method in your component that calls the router.navigate() method and passes in the previous route.

Example:

In your component:

import { Router } from '@angular/router';

constructor(private router: Router) { }

goBack() {
  this.router.navigate(['/previous-route']);
}

In your template:

<button (click)="goBack()">Back</button>

Method 3: Using the routerLink directive

The routerLink directive is a built-in Angular directive that allows you to create a link that navigates to a specific route in your application. To use this directive, you can create a back button in your template and bind it to the previous route using the router Link directive.

Example:

In your template:

<button [routerLink]="['/previous-route']">Back</button>

Note that this method does not require any additional logic in your component.

Method 4: Using the Location Service

The Location service is a built-in Angular service that allows you to interact with the browser’s URL. To use this service, you can create a back button in your template and bind it to a method in your component that calls the location.back() method.

Example:

In your component:

import { Location } from '@angular/common';

constructor(private location: Location) { }

goBack() {
  this.location.back();
}

In your template:

<button (click)="goBack()">Back</button>

Conclusion

In this tutorial, we have discussed the different methods for adding a back button in an Angular application to navigate to the previous page. We have shown how to use the location.back() method, the router.navigate() method, the routerLink directive and the location service to create a back button in your application. These methods can be useful for improving the user experience of your application by allowing the user to easily navigate back to the previous page.