Handle Back button with Angular [Chrome]

user_4869759 0
Viewed 2004

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.

angular google-chrome javascript
4 Answers

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
        }
      });
}
user_70256990

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

user_35651320

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 components
user_75582380

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 completely 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

user_33678180
Related