browser Back button in angular

Nagaraj Madyastha

I have a page in that it show connected system names "device" page, user can click on any system it shows login dialog, on success.

a. List page 'listPage' connected system's product is listed , user can click on product item it navigate to next page "product detail page"

b. Product Detail view [Click on Next button], user navigate "Page C"

c. Page-c [Click on Complete Button]

[In this button handle, i will navigate to list page]

this.router.navigate('/listPage');

this.location.replaceState('/devices');

]

Now If the user click the back button form 'listPage', and once again click back button it navigate to /device page and once again if the user click back button.I expect it should go out of the application stack and it show [initial screen assume google.com]

But, in my case after clicking Complete button, page navigate to list view, and user click back button it shows device list, once again if i click back button, page wont navigate stay on the same page and once again i click back button it move to list view and once again i click back button, it moves to device page. and once again back button its coming to googl.com

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Debasis Saha8y ago
If you are using Angular4 then use the below method for your work
window.onbeforeunload = function() {
    //Do your stuff here for open google.com
}
Nagaraj Madyastha8y ago
if user starts with different page other than google , if we want to handle back button in that case. How do we achive ?
Debasis Saha8y ago
You can write your code here-
window.onbeforeunload = function() {

//Do your stuff here for open google.com

}
You can use window.onbeforeunload not only to detect the back button but if the user leave the page, closing the window, for example.

If you are using angular UI router then check the below code -
app.run(function($rootScope, $location) {

    $rootScope.$on('$locationChangeSuccess', function() {

        if($rootScope.previousLocation == $location.path()) {

            //Do your stuff here for open google.com

        }

        $rootScope.previousLocation = $rootScope.actualLocation;

        $rootScope.actualLocation = $location.path();

    });

});

Or U can check the below link -
https://www.c-sharpcorner.com/UploadFile/81a718/solution-to-browser-back-button-click-event-handling/