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 theclick
event and callsthis.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
-
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. -
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,
Daniel Kreider