Angular js- Simulate browser back/forward button disabling

Question

Angular js- Simulate browser back/forward button disabling

I am working on application which requires me to simulate browser back/forward button(I have implemented 2 buttons). I am able to achieve this functionality using window.history.forward() and window.history.back(). The functionality works as desired. But i have one issue i have requirement of disabling forward button when there are no more pages to browse further and vice versa for back button.

I have tried using following workarounds, but nothing works.

if(!window.history.next){
    $scope.abcService.enableForwardButton = false;
}

This if condition never gets satisfied, even if I dont have any pages to browse further.

var index = window.history.length;
if(window.history[index] != window.location)
{
    $scope.abcService.enableForwardButton = true;
}

Any inputs will be helpful. Note: disabling the buttons is mandatory requirement for the application

javascript
angularjs
pushstate

Answer 1

I believe this should work for you.

if(typeof window.history.forward!=='function'){
  $scope.abcService.enableForwardButton = false;
}

When you can navigate forward then typeof window.history.forward is 'function' when you cannot then it is 'undefined'

Answer 2

The $location service may be of use to you. https://docs.angularjs.org/api/ng/service/$location#state

Also, I'm not sure how compatible it would be with angular, but you may want to look at https://github.com/browserstate/history.js/