How to disable Browser back button in Angular 2

How to disable Browser back button in Angular 2

how to handle browser back button in angular 6
how to disable browser back button in javascript
how to handle browser back button in angular 2
how to disable browser refresh button in angular 2
how to disable browser back button in sapui5
disable browser back button in reactjs
disable android back button javascript
angular back button not working

I'm developing a web site using Angular 2. Is there any way to disable or trigger Browser back button using Angular 2?

Thanks


Not sure if this is already sorted, but posting the answer nonetheless, for future references. To tackle this, you basically need to add a listener in your app-component and setup a canDeactivate guard on your angular-router.

// in app.component.ts
import { LocationStrategy } from '@angular/common';

@Component({
  selector: 'app-root'
})
export class AppComponent {
  constructor(
    private location: LocationStrategy
  ) {
    // check if back or forward button is pressed.
    this.location.onPopState(() => {
      // set isBackButtonClicked to true.
      this.someNavigationService.setBackClicked(true);
      return false;
    });
  }
}

// in navigation guard
@Injectable()
export class NavigationGuard implements CanDeactivate<any> {
  constructor(private someNavigationService: SomeNavigationService) {}
  canDeactivate(component: any) {
    // will prevent user from going back
    if (this.someNavigationService.getBackClicked()) {
      this.someNavigationService.setBackClicked(false);
      // push current state again to prevent further attempts.
      history.pushState(null, null, location.href);
      return false;
    }
    return true;
  }
}

How to disable Browser back button in Angular 2, angular-disable-browser-back-button. 1.0.1 • Public • Published 2 months ago. Readme · ExploreBETA · 1Dependency · 0Dependents · 2Versions  angular-disable-browser-back-button. This Angular module generated using @angular/cli version 8.2.14. Module developed to help Angular developers to disable the browser back button. Install. Copy the following command to your command line or terminal to install the package.


This Very simple use the following code, This example code is from plain javascript i have converted this into angular and using in my 2-3 projects

// Inject LocationStrategy Service into your component
    constructor(
        private locationStrategy: LocationStrategy
      ) { }


// Define a function to handle back button and use anywhere
    preventBackButton() {
        history.pushState(null, null, location.href);
        this.locationStrategy.onPopState(() => {
          history.pushState(null, null, location.href);
        })
      }

You can define preventBackButton in any service as well and call it from there

angular-disable-browser-back-button, We are using Angular 7. How to disable back button in the browser. Thanks. Sign in to reply. 9/24/19 Kamil Kaplan. import { PlatformLocation }  How do I close the bootstrapModal on click of browser's back button in Angular 2+ 1 How to Go back to particular page by clearing routing history, using Angular Router/Location


This isn't Angular2 related problem. You can send the user back in history. See Manipulating the browser history, history.go() method particular:

window.history.go(-1);

However, I don't think there's a way to cancel or disable default browser action on pressing back button in the browser window because that could be very easily abused.

As an alternative you can show a dialog window when user tries to leave the page: javascript before leaving the page

Disable Back button in browser, On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love. What's great about the Router updates in Angular 6 is that the NavigationStart event now popstate (ie, browser controlled change such as Back button). I have to restrict that navigation without disabling the back button. In this list it should only be available to click the button when the currentLesson has the value of the number of the lesson: Button of lesson 1 is active when : currentLesson = 1. Button of lesson 2 is active when : currentLesson = 2. Etc. etc. So if currentLesson = 2, the buttons of lesson 1, 3, 4, 5 and 6 should be disabled.


Try this

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

where change 'pagename' to your page name and put this into head section of page.

Using Router Events To Detect Back And Forward Browser , Restricting or Disabling the Browser back button can be very annoying for users src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js">  One cannot disable the browser back button functionality only thing that can be done is prevent them. Disable Browser Back Button Script The following JavaScript code snippet must be placed in the HEAD section of the Page where the User must be prevented from going back.


A bit late perhaps but maybe somebody can use it. This is a solution I use for a page with tabs (Bootstrap 4 style) where each tab is a component.

    @Injectable()
    export class CanNavigateService {

      private static _isPermissionGranted = true
      public navigationAttempt = new Subject<boolean>()

      //-------------------------------------------------------------//

      /**Will the next navigation attempt be permitted? */
      updatePermission(isPermissionGranted: boolean) {   
        CanNavigateService._isPermissionGranted = isPermissionGranted
      }//updatePermission

      //-------------------------------------------------------------//

      /**Broadcast the last attempt and whether it was permitted */
      updateNavigationAttempt(wasPermissionGranted: boolean) {    
        this.navigationAttempt.next(wasPermissionGranted)
      }//updatePermission

      //-------------------------------------------------------------//

      /**Can we navigate? */
      public isPermissionGranted(): boolean {
        return CanNavigateService._isPermissionGranted
      }//isPermissionGranted

    }//Cls

NavigationGuard like @Jithin Nair above but also broadcasts when an attempt to navigate was made and whether it was permitted. Subscribers of CanNavigateService can use it to decide what to do instead of back navigation.

@Injectable()
export class NavigationGuard implements CanDeactivate<any> {

constructor(private canNavigateService: CanNavigateService) { }

//--------------------------------------------------------------------//

// will prevent user from going back if permission has not been granted
canDeactivate(component: any) {

    let permitted = this.canNavigateService.isPermissionGranted()
    this.canNavigateService.updateNavigationAttempt(permitted)        

    if (!permitted) {
        // push current state again to prevent further attempts.
        history.pushState(null, null, location.href)
        return false
    }

    return true

}//canDeactivate

}//Cls

Usage:

constructor(private _navigateService: CanNavigateService) {
    super()

    _navigateService.navigationAttempt.subscribe(wasPermitted => {
        //If navigation was prevented then just go to first tab
        if (!wasPermitted)
           this.onTabSelected( this._firstTab)            
    })
}//ctor

//----------------------------------------------------------------------------//

onTabSelected(tab) {

    this._selectedTab = tab
    //If it's not the first tab you can't back navigate
    this._navigateService.updatePermission(this._selectedTab == this._firstTab)
}//onTabSelected

Restrict or Disable Browser Back Button Using JavaScript, I create auth app with routing in angular 2 with typescript. And now my task is disabled back button in browser from form localhost/form1 to localhost/login; how​  Ben Nadel looks at the addition of the "navigationTrigger" and "restoredState" properties on the NavigationStart event emitted by the Router in Angular 6+. These properties allow us to differentiate navigation actions that were triggered imperatively by our application code; or, as a location-based change such as clicking the browser's Back and Forward buttons.


Disable back-page button in browser - angular - html, The problem is when I remove the 'guarded' root route ( I marked it above) in the guarded-routing.module and make it an empty string it gets caught in a redirect  2 points · 2 years ago Share your URL examples and NGINX config (sanitize them as appropriate for privacy). It's likely the URL that the browser is requesting isn't being properly forwarded to your angular index.html


Confirmation Box on click of browser back button? : Angular2, But when I click browsers back button, it goes to login page. How can I clear browser history or disable login component. I use CanActivate for dashboard, profile  You cannot disable browser controls. Image what kind of security issues would that bring, if such a terrible thing to do was possible. Also CLI is just a wrapper over the build system used to bundle an Angular application.


Angular2 How to clear login route from history : Angular2, How to disable browser back button with JavaScript,Code to disable browser back button on particular page with javascript,disable back button with Java 2​. <h1><a href="http://www.justwebcode.com" rel="index,follow">Just Web  detect browser back button click angular 2 (5) . I have a form-like page with some data. And want to show a popup/alert when a user clicks the browser back button, asking "if they want to go back or stay on the same page".