Skip to main content

NgBootstrap: Modal Example

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

// Reference services in component's constructor
constructor(public activeModal: NgbActiveModal...

// Close the modal from the .ts
this.activeModal.close({ someDataToPassToListeningView: true });

Component .html​

<div class="modal-header">
    <h1 class="modal-title text-nowrap">Modal Title</h1>

    <div class="modal-header-actions">
        <button type="button" class="btn close" title="Close Modal" (click)="activeModal.dismiss('Cross clicked')">
            <!-- This is using a FontAwesome icon ref -->
            <i class="fas fa-times" aria-hidden="true"></i>
        </button>
    </div>
</div>

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

<div> class="modal-footer d-flex justify-content-center">
    <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss('Close clicked')" title="Close Modal">Close</button>
</div>

Launching a modal and listening for response​

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

// Reference services in component's constructor
constructor(private modalService: NgbModal...

// Launch the modal
const modalConfig: NgbModalOptions = { windowClass: 'some-class-to-apply', size: 'lg' };
let modalRef = this.modalService.open(SomeModalComponent, modalConfig);
modalRef.componentInstance.someModalProp = true;

modalRef.result.then(
    modalResp => { // Close handler },
    () => { /* Dismiss handler - Need to define this or an exception is thrown */ }
);