Angular 2 ng-bootstrap close Modal

Question

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 me

Answer 1

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();
  }

Answer 2

I followed the doc from ng-bootstrap with Angular 6. Finally I found the solution changing one line from the original example:

modal-options.html

<ng-template #content let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="d('Close click')">Close</button>
  </div>
</ng-template>

I changed from this let-modal to this let-d="dismiss" and also this 2 lines:

• (click)="d('Cross click')"
• (click)="d('Close click')"

modal-options.ts

constructor(private modalService: NgbModal) {}

openLg(content) {
  this.modalService.open(content, { size: 'lg' });
}

Answer 3

1. At your modal component you need to add the line :

   @ViewChild('exampleModal') public exampleModal:ModalDirective;
   

2. At html modal you need to insert in the div root :

   #exampleModal="bs-modal"
   

3. At your modal component :

   onSave(){
      this.exampleModal.hide();
   }