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]
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.