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