CODEWITHSUNDEEP
javascriptangulargoogle-chrome
Karan
Karan

Reputation: 1118

Angular Catch the back button event for all browsers

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]

Upvotes: 3

Views: 6975

Answers (1)

Davis Jahn
Davis Jahn

Reputation: 573

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.

Upvotes: 3

Related Questions