Angular 2 ng-bootstrap close Modal

angularng-bootstrap

I am trying to close the modal that was presented to me through the open(content) function as shown in the example in the Documentation of ng-boostrap. In the website, it mentioned that i can call close or dismiss from NgbActiveModal.

So I included NgbActiveModal in the component and tried to call dismiss() or close(). Both of them doesn't work. First of all, dismiss() is undefined (Am I importing NgbActiveModal wrong?) When I call close(), it seems to want to call some weird function inside lib.dom.d.ts which is not what I want at all. So to me it seems like I have no access to the close and dismiss provided by ng-bootstrap even after I imported NgbActiveModal. Note that I can show the modal fine

In the example, the modal was closed via (click)="c('Close click')". I have no idea where that comes from.

So… How can I call the close() or dismiss() (Whichever works) to get rid of the modal

Best Answer

Answer can be found here. ng-bootstrap website is missing lots of information unfortunately Cannot close ng-bootstrap Modal

Inside the component class

  private modalRef: NgbModalRef;

  // Modal
  open(content) {
    this.modalRef = this.modalService.open(content);
    this.modalRef.result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  onSave() {
    this.modalRef.close();
  }

Related Solutions

Visual-studio – Recompiled Qt libraries with VS, now why won’t Qt Creator compile

The goal is to ensure you have a properly compiled QTDIR. In your case one for VS and one for gcc (if you want the two).

Depending on what you downloaded Qt Creator uses gcc but you can specify alternative QT directories under Options > Qt4 > Qt Versions. The path and version will show in the dialog box.

Go to the VS command line and run configure.exe & nmake with a clean source repository. Then add this QTDIR to you Qt Creator. I suggest you run make clean before.
Then make sure qmake and nmake can be run from the Qt command-line without errors. You should have a Qt Command line icon installed if you used Qt installer. If not, make sure you have QTDIR environment variable set, with %QTDIR%/bin in the path.
Do step 1 again, but this time do not use VS but make sure gcc is in the path. Run configure.exe etc again but in a separate directory specially for gcc. Add this version to your Qt Creator.
When compiling your project, run qmake first. You can change Qt versions, but do not forget to run qmake.

Hope this helps.

Angular2: Close ng-bootstrap modal with browser back event

I actually solved my problem by inserting some "fake" history state when open up the modal. The function for modal opening and modal closing looks like the following:

modalRef: NgbModalRef;

open(content: NgbModal) {
    this.modalRef = this.modalService.open(content);

    // push new state to history
    history.pushState(null, null, 'modalOpened');

    this.modalRef.result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

private getDismissReason(reason: any): string {
    // go back in history if the modal is closed normal (ESC, backdrop click, cross click, close click)
    history.back();

    if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
    } else {
        return  `with: ${reason}`;
    }
}

The open() and getDismissReason() functions are copied from https://ng-bootstrap.github.io/#/components/modal "Modal with default options". The important parts i added are pushing the new history state on modal open and go back in history on "normal" modal close. When we go back with the browser back button this function is not called and we go back in history automatically.

To ensure that the modal is closed on history back event you need the following lines:

constructor(private location: PlatformLocation, private modalService: NgbModal)
{
    location.onPopState((event) => {
        // ensure that modal is opened
        if(this.modalRef !== undefined) {
            this.modalRef.close();
        }
});

Conclusion: When the modal is opened we push a new history state (e.g. with the current page). If the modal is closed normally (using ESC, close button, ...) the history back event is manually triggered (we do not want to stack history states). If the history back event is triggered by browser we just need to close the modal if it is opened. The pushed history stack ensure that we stay on the same page.

Limitations: Adding a new history stack and going back in history also provide the opportunity to go forward in history (after closing the modal). This is not the desired behavior.

Best Answer

Related Solutions

Visual-studio – Recompiled Qt libraries with VS, now why won’t Qt Creator compile

Angular2: Close ng-bootstrap modal with browser back event

Related Topic