Modals - luftsport/nlf-client GitHub Wiki

Example component

import { Router, NavigationStart } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({})
export SomeClass {
    modalRef;
    constructor(private modalService: NgbModal,
                private router: Router) {
        router.events
              .filter(event => event instanceof NavigationStart)
              .subscribe((event: NavigationStart) => {
                 if (!!this.modalService.hasOpenModals()) {
                      this.modalService.dismissAll();
                 }
              });
    }
}

By subscribing to NavigationStart the modal is automatically closed on route change.

Add method to open modal

openModal(template) {
    (do what is needed) {
        this.modalRef = this.modalService.open(template, { size: 'lg' });
    }
}

Data resolving should be done in the open method.

Template example

<span class="pointer text-info" (click)="openModal(myModalTemplate)">
    Open modal
</span>

<ng-template #myModalTemplate>
  
    <div class="modal-header">
      <h4 class="modal-title pull-left">
        Modal Title
      </h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.dismiss()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
        Modal body
    </div>

    <div class="modal-footer">
      Modal footer
    </div>
</ng-template>

Modal as component

Parent component

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
modalRef;
constructor(private modalService: NgbModal) { }

openModal() {
    this.modalRef = this.modalService.open(NlfComponentOfChoosing, { size: 'lg' });
  }

Modal content component

import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

constructor(public activeModal: NgbActiveModal) { }

In template

<div class="modal-footer">
  <button class="btn btn-outline-dark" (click)="activeModal.close()">Ferdig</button>
</div>

Using a component as modal content you can resolve the modalRef.result promise which will resolve on .close() and be rejected on .dismissed() and handle accordingly from the component opening the modal.

this.modalRef.result.then(
      closed => {
        this.doSomething();
      },
      err => console.log(err),
      () => {}
    );