Angular2 Check if Location.back has history to go back?

Question

So I have a button that calls, Location.back() i want to show it when it has history available, is it posible to check if location has any history, or can go back?

Or is there a way of accessing the history miself?

Angular Version: 2.2.3

HTML:

<div (click)="historyBack()">
  <i class="fa fa-angle-left"></i>
</div>

component:

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

@Component(...)
export class HomeComponent{
  hasHistory = false;
  constructor(
   private _location: Location
  ){
    this.hasHistory = //Magic code
  }
  historyBack(){
    this._location.back();
  }
}

I tried `window.history.length`, but it returns random numbers: 4, 3, even if there is no history, and `Location.back()` does not do anything — Keff, Jan 10 '17 at 15:56

score 20 · Accepted Answer · answered Apr 09 '19 at 09:05

20

In Angular 7 you can use Router.navigated property to check if any navigation event has occurred.

constructor(
  private router: Router,
  private location: Location
) {
  this.hasHistory = this.router.navigated;
}

answered Apr 09 '19 at 09:05

filarrro

232
3
3

score 3 · Answer 2 · answered Jan 26 '22 at 14:17

Tried many solutions out there-

this.router.navigated always returned true for some reason (maybe because I'm navigating to another page via redirectTo in routing).
I tried with history.length but that always returned 2.
Then tried to use history.state to check if doesn't contain any arbitrary data, then I can assume it's a fresh tab open without any history. But it was only setting {navigationId: 1} (by Angular) so was not useful when refreshing an existing tab with existing history.

Finally, I thought of using sessionStorage this way which is working fine for me.

In a global space (let's say in app.component.ts), I did this-

ngOnInit(): void {
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
    ).subscribe(() => {
        let navigations = parseInt(sessionStorage.getItem('totalNavigations'), 10) || 0;
        navigations++;
        sessionStorage.setItem('totalNavigations', navigations.toString());
    });
}

Now, when I want to go back to see if there is any history, I'm doing this-

goBack(): void {
    const totalNavigations = parseInt(sessionStorage.getItem('totalNavigations'), 10);
    if (totalNavigations > 1) {
        this.location.back();    // Or history.back()
    } else {
        this.router.navigateByUrl('/my-default-path')
    }
}

Baruch Gans · Answer 3 · 2020-12-14T12:59:54.180

2

You can use JavaScript to view the last place the user visited:

document.referrer

doc

So, in your case, you can check if the user can go back, as follows:

historyBack() {
if (document.referrer) {
  this._location.back();
 }
}

edited Dec 14 '20 at 12:59

answered Dec 14 '20 at 11:45

Baruch Gans

1,415
1
10
21

O-9 · Answer 4 · 2022-06-17T06:36:31.137

I have a component that has a "go back" button and problem is that I don't want to show it if history is empty/app is initially started from this view.

We tried various things like listening for route changes with rxjs pairwise(), Router.navigated (see accepted answer) and other stuff. The one that seems to work every time in various scenarios is getState() from Location.

this.location.getState() returns {navigationId: 1}

It doesn't reset when new tab is opened and then navigated to the view, but for my needs, that's fine.

It does work however, if I duplicate my tab when it is the very first view (perfect!)

If you don't want to use Angular's Location class, you can just access the same object from window.history

Angular2 Check if Location.back has history to go back?

4 Answers4