Angular 2 How to detect back button press using router and location.go()?

Question

I have built an app that uses router 3.0.0-beta.1 to switch between app sections. I also use location.go() to emulate the switch between subsections of the same page. I used <base href="/"> and a few URL rewrite rules in order to redirect all routes to index.html in case of page refresh. This allows the router to receive the requested subsection as a URL param. Basically I have managed to avoid using the HashLocationStrategy.

routes.ts

export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        component: CatalogComponent
    },
    {
        path: 'catalog/:topCategory',
        component: CatalogComponent
    },
    {
        path: 'summary',
        component: SummaryComponent
    }
];

If I click on a subsection in the navigation bar 2 things happen:

logation.go() updates the URL with the necessary string in order to indicate the current subsection
A custom scrollTo() animation scrolls the page at the top of the requested subsection.

If I refresh the page I am using the previously defined route and extract the necessary parameter to restore scroll to the requested subsection.

this._activatedRoute.params
    .map(params => params['topCategory'])
    .subscribe(topCategory => {
        if (typeof topCategory !== 'undefined' &&
            topCategory !== null
        ) {
            self.UiState.startArrowWasDismised = true;
            self.UiState.selectedTopCategory = topCategory;
        }
    });

All works fine except when I click the back button. If previous page was a different section, the app router behaves as expected. However if the previous page/url was a subsection, the url changes to the previous one, but nothing happens in the UI. How can I detect if the back button was pressed in order to invoke the scrollTo() function to do it's job again?

Most answers I saw relly on the event onhashchange, but this event does not get fired in my app since I have no hash in the URL afterall...

https://stackoverflow.com/questions/35912932/angular-2-router-event-listener see that — Aderbal Nunes, Jun 27 '17 at 13:33

VSO · Accepted Answer · 2020-09-23T14:10:34.177

84

I don't know if the other answers are dated, but neither of them worked well for me in Angular 7. What I did was add an Angular event listener by importing it into my component:

import { HostListener } from '@angular/core';

and then listening for popstate on the window object (as Adrian recommended):

  @HostListener('window:popstate', ['$event'])
  onPopState(event) {
    console.log('Back button pressed');
  }

This worked for me.

edited Sep 23 '20 at 14:10

answered Apr 11 '17 at 22:04

VSO

11,546
25
99
187

1

Would this work if I'm using mobile device and pull down the screen and refresh the page? – indrajeet Jul 20 '19 at 05:39
5

As MDN states: "A popstate event is dispatched to the window each time the active history entry changes between two history entries for the same document". That means the event will be triggered when the user clicks on "back" but also on "forward" – Florent Arlandis Sep 03 '19 at 14:16
@indrajeet /* Handle the tab closed/refreshed event */ @HostListener('window:beforeunload', ['$event']) unloadNotification($event: any) { if (pendingTask()) { /* Implement your logic that either you have any pending task or not */ return false; } else { return false; } } – Muhammad Bilal Feb 13 '20 at 03:40
"Latest" Angular version doesn't help people who come to the question years later. Would love to have this have stated the actual version you were on. – Sean Halls May 24 '20 at 06:33
1

@SeanHalls We were on 7 at the time. I will update the answer. – VSO May 26 '20 at 14:47
Beware the state object in the PopStateEvent will have "navigationId" and not your state data you provided. – Raid Jul 14 '22 at 22:09

score 54 · Answer 2 · answered Aug 08 '19 at 00:08

54

Another alternative for this issue would be to subscribe to the events emitted by the Angular Router service. Since we are dealing with routing, it seems to me that using Router events makes more sense.

constructor(router: Router) {
    router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          // Perform actions
        }
      });
}

I would like to note that popstate happens when pressing back and forward on the browser. So in order to do this efficiently, you would have to find a way to determine which one is occurring. For me, that was just using the event object of type NavigationStart which gives information about where the user is coming from and where they are going to.

answered Aug 08 '19 at 00:08

Jon

2,456
21
28

2

Appreciate the steer on the need for further logic to determine between forward and back – daddywoodland Aug 28 '19 at 13:52
1

This answer looks to provide a better solution – Mohammad Kermani Nov 21 '19 at 19:19
1

If you use this solution, you must also unsubscribe from the `router.events` observable. Otherwise, once you visit the page with this code, the "perform actions" will continue to execute for every popstate action application wide. – matt forsythe Mar 22 '22 at 21:43
1

This is the better answer, as stated it´s really about route. – Learning Mar 18 '23 at 13:43

Shivakumar NH · Answer 3 · 2018-09-12T10:52:33.210

13

To detect browser back button click import platformlocation from '@angular/common and place the below code in your constructor :

 constructor(location: PlatformLocation) {
     location.onPopState(() => {
        alert(window.location);
     }); }

edited Sep 12 '18 at 10:52

answered Jul 04 '17 at 08:52

Shivakumar NH

161
1
12

8

According to Angular's official documentation, PlatformLocation should not be used directly by an application developer. – KlavierCat May 03 '19 at 10:43

Nikhil Yadav · Answer 4 · 2022-01-06T09:13:31.083

12

This is the latest update for Angular 13

You have to first import NavigationStart from the angular router

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

Then add the following code to the constructor

constructor(private router: Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
      if (event.navigationTrigger === 'popstate') {
        /* Do something here */
      }
    }
  });
}

edited Jan 06 '22 at 09:13

answered Mar 02 '21 at 06:59

Nikhil Yadav

1,419
1
13
8

Doesn't work for mobile Chrome. Works for desktop Chrome – Ste Oct 21 '22 at 09:00
but this will be executed only once when the module is loaded, and not every time a back button is pressed, right? UPDATE: for some reason it works, but I don't see why. As if the forEach function doesn't just perform a loop, but also a subscribe(), which seems kind of hacky to me. – LachoTomov Jan 02 '23 at 13:42

score 9 · Answer 5 · edited Sep 11 '18 at 15:30

9

Angular documentation states directly in PlatformLocation class...

This class should not be used directly by an application developer.

I used LocationStrategy in the constructor

constructor(location: LocationStrategy) {
  location.onPopState(() => {
    alert(window.location);
  });
}

edited Sep 11 '18 at 15:30

pbialy

1,025
14
26

answered Dec 01 '17 at 16:59

Rmalmoe

993
11
13

how do you stop listening to events or unsubscribe from this event. i tried using fromEvent(window, 'popstate') and unsubscribing there but it didnt work. – Joshua JLIVE Williams Oct 13 '18 at 00:16
you could do location.onPopState = () => {} – Ben Taliadoros Oct 22 '18 at 16:11

score 9 · Answer 6 · answered Jul 23 '18 at 03:12

9

A great clean way is to import 'fromEvent' from rxjs and use it this way.

fromEvent(window, 'popstate')
  .subscribe((e) => {
    console.log(e, 'back button');
  });

answered Jul 23 '18 at 03:12

Ryann Galea

307
3
18

2

I adopted this solution, much cleaner indeed. I define a subscription, then do the `subscribe` in `ngOnInit`, and the `unsubscribe` in the `ngOnDestroy`. – KlavierCat May 03 '19 at 12:29

score 3 · Answer 7 · answered Aug 24 '16 at 21:45

3

Using onpopstate event did the trick:

window.addEventListener('popstate',
    // Add your callback here
    () => self.events.scrollToTopCategory.emit({ categId: self.state.selectedTopCategory })
);

answered Aug 24 '16 at 21:45

Adrian Moisa

3,923
7
41
66

score 3 · Answer 8 · answered Oct 28 '16 at 08:25

3

I agree with Adrian Moisa answer,

but you can use "more Angular 2 way" using class PlatformLocation by injecting to your component or service, then you can define onPopState callback this way:

this.location.onPopState(()=>{
  // your code here...
  this.logger.debug('onpopstate event');
});

answered Oct 28 '16 at 08:25

vanrado

348
3
13

3

The problem with onPopState is that the event is raised even if the user go forward. – Christophe Gigax May 12 '17 at 09:01
This creates a global listener for the `window:popstate` event while using `@HostListener` will only listen when on the current component. – Raul A. Jun 12 '18 at 08:02
PlatformLocation: "This class should not be used directly by an application developer." – Mikkel R. Lund Feb 25 '21 at 09:47

score 2 · Answer 9 · answered Jul 15 '20 at 07:57

Simpler way - Link

import { PlatformLocation } from '@angular/common';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
...

constructor(
private platformLocation: PlatformLocation ,
private modalService: NgbModal
)
{
platformLocation.onPopState(() => this.modalService.dismissAll());
}

score 0 · Answer 10 · answered Aug 14 '20 at 11:11

I honestly don't know your use case. And the thread is quite old. But this was the first hit on Google. And if someone else is looking for this with Angular 2 and ui-router (just as you are using).

It's not technically detecting the back button. It's more detecting whether you as a developer triggered the state change or whether the user updated the URL themselves.

You can add custom options to state changes, this can be done via uiSref and via stateService.go. In your transitions, you can check whether this option is set. (It won't be set on back button clicks and such).

Using ui-sref

    <a uiSref="destination-name" [uiOptions]="{custom: {viaSref: true}}">Bar</a>

Using state.go

import {StateService} from '@uirouter/core';

...

@Component(...)
export class MyComponent {

    constructor(
        private stateService: StateService
    ) {}

    public myAction(): void {
        this.stateService.go('destination-name', {}, {custom: {viaGo: true}});
    }
}

You can detect it in any transition hook, for example onSucces!

import {Transition, TransitionOptions, TransitionService} from '@uirouter/core';

...

@Component(...)
export class MyComponent implements OnInit {

    constructor(
        private transitionService: TransitionService
    ) {}

    public ngOnInit(): void {
        this.transitionService.onSuccess({}, (transition: Transition) => this.handleTransition(Transition));
    }

    private handleTransition(transition: Transition): void {
        let transitionOptions: TransitionOptions = transition.options();
        if (transitionOptions.custom?.viaSref) {
            console.log('viaSref!');
            return;
        }
        if (transitionOptions.custom?.viaGo) {
            console.log('viaGo!');
            return;
        }
        console.log('User transition?');
    }
}

score -2 · Answer 11 · answered Apr 06 '21 at 10:22

-2

You can check the size of "window.history", if the size is 1 you can't go back.

isCanGoBack(){
    window.history.length > 1;
}

answered Apr 06 '21 at 10:22

pilladooo

713
6
10

Angular 2 How to detect back button press using router and location.go()?

11 Answers11

Linked