How to call browser back button in Angular Project

Question

In my Angular 8 project, I currently have a landing page (template-table.component) that shows a list of items that can be filtered and sorted. The filter and sort are added to the route queryParams(ex: "/template-table?name=another&type=Type%201"). If you select an item in the list, you will be taken to another route (that has the template-details.component) that has more details on that item. This details page will have a 'back to list' button that should take the user back to their previous list page.

Since I want the user to be taken back to the list with the filter params they were previously using, I can't simply go to the route of that component, instead I want to go back in history (like how the browser back button works). So, how do I set an element to link to what the browser back button would be link to?

So, this is the bare minimum of my template-detail.component.html:

<h1>template-details works!</h1>
<div>{{template}}</div>
<div>{{id}}</div>
<div><a routerLink="/template-table/">Return to list page</a></div>

I think I also would like to check the route to see if it's the template-table component route with query params, and not an unrelated route. (So, the route would need to be like: "/template-table?params=xxx", and couldn't be "google.com". If the browser back button isn't related to the template-table, then it should go to "/template-table" without any params (or maybe my 404 page.)

The basic functionality that I'm wanting to achieve is for the user to be able to filter a list, go to another route with more info on a list item, and then return to the list with the same filters they previously added. If there would be a better way to do this than by trying to access the browser's back button, I'd love to hear about it.

Thank you for any assistance you can provide.

For those wanting to know, location.back() navigates you to the previous page, but I wasn't able to access the url string of that page to verify the user would be going to the list page w/ search params. I ended up merging the queryParamsHandling when I navigated to details page (this meant the search params would still be in the route), and then navigated back to the list page with the same params. This allowed me to keep users in my site (which location.back() has a chance of doing. Check out [ link](alligator.io/angular/query-parameters) for more info (look under preserve sec). — ineedtoknow
– ineedtoknow, Commented Feb 18, 2020 at 17:14

Wassim Katbey · Accepted Answer · 2020-02-17 14:07:46Z

4

Arthurofos' suggestion to use the Location service seems to be relevant, as it can be used to navigate back to the view you were in prior to routing to a new component.

Of course, while there are very Javacsripty-ways to do these sort of things, it's always recommended to use Angular's libraries, if such an alternative exists.

In our case, it does, and it presents itself as the 'Location' service you can inject into your component.

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

@Component({
  // Other component info
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]
})
export class TestComponent {
   constructor(private location: Location, // Other constructor arguments) { }

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

https://alligator.io/angular/location-service/

answered Feb 17, 2020 at 14:07

Wassim Katbey

3374 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arthurofos · Accepted Answer · 2020-02-17 13:56:44Z

1

Something like that should work: routerLink="../"

But you can solve this problem in an elegant way thanks to the location of the library. Check out this post: enter link description here

answered Feb 17, 2020 at 13:56

Arthurofos

3082 silver badges12 bronze badges

1 Comment

ineedtoknow Over a year ago

That link provided me exactly what I needed (using this.location.back();). Thanks I bunch! But I'm not sure how 'routerLink="../"' was meant to work...using that doesn't seem to take me to that previous page. If you remove that from your answer, I'll accept it and upvote it!

Collectives™ on Stack Overflow

How to call browser back button in Angular Project

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related