Angular Catch the back button event for all browsers

user_4869759 0
Viewed 1729

I am creating project using angular. In my project i need to handle the browser back button. The requirement is when user click on back button it should be logged out

Login Url is different and dashboard is different.

Below is the implementation

// app.component.ts

@HostListener('window:popstate', ['$event'])
  onBrowserBackBtnClose(event: Event) {
    history.pushState('back', null, null);      
    // log out url
}

But above code is not working when user just landed on the dashboard

Note: It only when user is doing some activity, if user is not doing any activity the event is not firing [chrome]

angular google-chrome javascript
1 Answers

I'm not a fan of using window:popstate because it feels like it shouldn't be used in Angular. A better method of listening for popstate events is to subscribe to the location service:

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

constructor(private location: Location) { } 

ngOnInit() { 
    this.location.subscribe(event => {
           //do something
 });
}

a big plus: you can unsubscribe any time you want.

Please keep in mind that as with window:popstate it won't directly detect if you went back or forth. It only fires when it has detected that the route params have changed which ALSO happens when the user hits the forth button.

user_100248960
Related