HostListener on browser back button fires twice in Angular

Question

I have a @HostListener in a routed angular application that just simply asks if you wish to leave the page you are on if you click the back button on the browser. When clicking 'Ok' on the dialogue box another one pops up asking you the same again. So I can only assume the event is handler is being fired twice.

@HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event: Event) {
    // If we can go back...
    if (this.canGoBack) {
      alert('Are you sure you want to go back and exit the review?');
    }
  }

Is this a bug within Angular or normal behaviour due to the routing mechanism? And is there a way to resolve this? Or work around it? Or maybe there's a better way in Angular to do something when you click the back button?

I tried to reproduce it but i couldn't, only 1 dialogue box shows up. There must be something else in your code responsible for this. — Ashish Dahiya, Jan 03 '21 at 16:47

score 1 · Accepted Answer · answered Jan 03 '21 at 17:16

The HostListner is just reporting the events, so it could be that the page is pushed/stacked the twice/multiple times, I'm guessing without seeing the rest of you code, its either

via navigation
via code
or the router/outlet

look here, someone else had the same thing happen. So, try to peek at the stack and the nav-menu/router control. This should help you!

HostListener on browser back button fires twice in Angular

1 Answers1