How to go back to last page (Angular)


Want to navigate back to the previous page in Angular?

This is a common scenario.

And today I'm going to show you how to implement a "Go Back" button in Angular.

Scenario

Imagine you have a page (Page C) with a "Go Back" button, and the user may have arrived at Page C from different routes:

  • From Page A -> Page C
  • From Page B -> Page C

The goal is to allow the user to click the "Go Back" button and be returned to the correct previous page (Page A or Page B) without hardcoding any routes.

Step-by-Step Implementation

1. Use the Location Service

Angular provides the Location service, which allows you to interact with the browser's URL. Specifically, you can use the back() method to navigate to the previous page in the browser's history, just like clicking the browser's back button.

Example Code

Here’s how you can implement this in an Angular component:

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

@Component({
  selector: 'app-some-component',
  templateUrl: './some-component.component.html'
})
export class SomeComponent {

  constructor(private location: Location) { }

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

So to resume what we've done?

  • The Location service is imported from @angular/common.
  • In the backClicked() method, this.location.back() is called to navigate back to the previous page.

Template

In your component's template, you can attach the backClicked() method to a button:

<button (click)="backClicked()">Go Back</button>

This button will now function as a back button, navigating the user to the previous page in the browser history.

2. Using a Directive for Reusability

If you need to reuse the "Go Back" button functionality across multiple components, you can create a directive. This approach allows you to add the functionality to any clickable element without duplicating code.

Example Code for a Directive

import { Directive, HostListener } from '@angular/core';
import { Location } from '@angular/common';

@Directive({
  selector: '[backButton]'
})
export class BackButtonDirective {
  constructor(private location: Location) { }

  @HostListener('click')
  onClick() {
    this.location.back();
  }
}

In this example:

  • The BackButtonDirective listens for the click event and calls this.location.back() when the element is clicked.

Usage

You can now use this directive on any clickable element, such as a button:

<button backButton>BACK</button>

This will automatically provide the "Go Back" functionality without needing to define the logic in each component.

3. Router vs. Location: When to Use What?

Although using the Location service is convenient, the Angular team recommends using the Router service for route changes when possible. This is because Router gives you more control over navigation and URL management within your Angular application. However, Location is still useful when you need to navigate based on browser history rather than specific routes.

Additional Considerations

  1. Browser History Limitation: The location.back() method relies on the browser’s history stack. If the user visits a page directly (i.e., not by navigating through your app), the back button might not behave as expected.

  2. Edge Cases: If your app allows users to navigate through complex routes or redirects, consider implementing a more sophisticated state management solution, such as using the Angular Router’s navigate() method with route parameters.

Conclusion

So to wrap this up here's what we've discovered.

For most basic back-navigation use cases in Angular, the Location service's back() method is a simple and effective solution.

And we can implement this in a component or as a reusable directive, it will enhance your application’s usability by providing a quick way for users to return to the previous page.

Till next time,

signature

Daniel Kreider