I am creating a project using angular, In my application I need to handle back button event. Below is the code which is working fine apart from one scenario

Code:

this.location.subscribe(event => {
 //logout
});
history.pushState({}, '');

This code only works when user is perform some activity, if user just landed on page and click back button then this event is not captured. I tried all the ways but not works.

I am creating a project using angular, In my application I need to handle back button event. Below is the code which is working fine apart from one scenario

Code:

this.location.subscribe(event => {
 //logout
});
history.pushState({}, '');

This code only works when user is perform some activity, if user just landed on page and click back button then this event is not captured. I tried all the ways but not works.

• javascript
• angular
• google-chrome

• what do you need to handle back button exactly for? If you use the router as the primary source of truth I see little cases where you'd need that – maxime1992 Commented Dec 1, 2021 at 10:31

4 Answers 4

A simple way is to add the popstate event, every time when user click on the back button. It will be fired.

window.addEventListener('popstate', (event) => {
    // The popstate event is fired each time when the current history entry changes.

    // logout or do any thing you like

}, false);

If this doesn't work you could go for Angular Router and check which event is called.

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

This solves the problem for me, captured even when no activity by user

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

PS: tested in Chrome

You can try to override the whole onpopstate like this

window.onpopstate = function () {
  // Your logic should be here...
}.bind(this); // This line is to bind the ponents

I think that before the user interacts with the web page, beforeunload is fired and the page will be unloaded before you can catch popstate. Combined together, they seems to be working.

Note that you won't be able to pletely override browser behavior as a security feature.

https://angular-ivy-pbvgpj.stackblitz.io/

export class AppComponent {
  name = 'Angular ' + VERSION.major;
  backButtonClicked = false;

  ngOnInit(): void {
    history.pushState(null, document.title, location.href);
  }

  @HostListener('window:popstate', ['$event']) onClickBack(
    event: PopStateEvent
  ) {
    history.pushState(null, document.title, location.href);
    this.backButtonClicked = true;
  }

  @HostListener('window:beforeunload', ['$event']) onBeforeUnload(
    event: BeforeUnloadEvent
  ) {
    history.pushState(null, document.title, location.href);
    this.backButtonClicked = true;
  }
}

Stackblitz