NgbModal does not close on back navigation

Please remember, the issues forum is NOT for support requests. It is for bugs and feature requests only.
Please read https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CONTRIBUTING.md and search
existing issues (both open and closed) prior to opening any new issue and ensure you follow the instructions therein.

Bug description:

Hi guys I know this has been requested before. But is it really that much of a problem if there was an option to auto-close the modal when a user navigates back using the browser’s back button? There are literally only two things developers would want here: either it stays open or not. A simple boolean for whichever option wouldn’t be overkill as stated in the other issue.

Link to minimally-working plunker that reproduces the issue:

You can fork a plunker from one of our demos and use it as a starting point.
Please note that we can not act on bug reports without a minimal reproduction scenario in plunker. Here is why:
https://github.com/ng-bootstrap/ng-bootstrap#you-think-youve-found-a-bug

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5

ng-bootstrap: 1.1.2

Bootstrap: 4.1.1

3 thoughts on “NgbModal does not close on back navigation

  1. Hi guys I know this has been requested before. But is it really that much of a problem if there was an option to auto-close the modal when a user navigates back using the browser’s back button? There are literally only two things developers would want here: either it stays open or not. A simple boolean for whichever option wouldn’t be overkill as stated in the other issue.

    Sorry, we are still not planning on adding this for the reasons explained previously. We’ve added dismissAll() recently (https://ng-bootstrap.github.io/#/components/modal/api#NgbModal) to make it easier for users, through.

    Adding the requested functionality would mean that we must add dependency on Angular router and we don’t want to force it on our users since:

    • people might not want to use router in their project;
    • people might want to use another router implementation.

    We should probably add some docs on it, though.

  2. Hi, after reading @pkozlowski-opensource comment some times and trying to understand what he can say….
    It’s not necessary to implement any router dependency to add this option.

    Actually, you can listen to window.onpopstate eventListener and dismisAll without any dependency.

  3. You need to add this code put in your dialog component.

    import { PlatformLocation } from ‘@angular/common’;
    import { NgbModal } from ‘@ng-bootstrap/ng-bootstrap’;

    constructor(
    private platformLocation: PlatformLocation ,
    private modalService: NgbModal) {

    // closes modal when back button is clicked
    platformLocation.onPopState(() => this.modalService.dismissAll());
    

    }