Nzbs-modal NPM

NzBsModal

Bootstrap modal library for Angular 6. Built on top of the Bootstrap js, with full support for modal styling, animations, options and events.

NB: By design this library depends on jQuery, popper.js, bootstrap.js and bootstrap.css. You need to include those scripts and styles in your build. If you are looking for a native Angular implementation, look at ngx-bootstrap or ng-bootstrap.

Get Started

Install the Library & Dependencies

npm i --save nz-bs-modal jQuery popper.js bootstrap

Include the JS and CSS Dependencies in Your Build

Add the following entries in the styles and scripts sections of your project in angular.json. Real-life example.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/styles.scss"
],
"scripts": [
  "node_modules/jquery/dist/jquery.slim.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Alternately, you can include the Bootstrap styles in your app stylesheet...

// src/styles.scss...
@import "~bootstrap/scss/bootstrap";
// more styles...

Usage

The library comes with two things:

The ModalService which your components will use to show modals.
a ModalComponent which is meant to be a "singleton." You only need one of these in your app, and it should be placed as high up in the DOM as possible, for example, at the end of your AppComponent template. You can pass in some default options if you don't like the built in ones. After that, you really don't have to worry about it.

Import the ModalModule in your app module

We only want to have one instance of the Modal Service, so call ModalModule.forRoot(). See a full example.

// src/app/app.module.ts
import { ModalModule } from 'modal';

@NgModule({
  imports: [
    // other imports
    ModalModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the ModalComponent to your app component

Insert the component selector <nz-bs-modal></nz-bs-modal> at the bottom of app.component.html. Full example.

<!-- app.component.html -->
<div style="padding-top:56px">
  <router-outlet></router-outlet>
</div>
<nz-bs-modal></nz-bs-modal>

Minimal Example: Use the service to display modals from other components

First, add an <ng-template> to your component's template. Make sure to reference it with a template reference variable, e.g. #modal. It should contain at least a .modal-body div.

<!-- in my.component.html -->
<p>
  <button class="btn btn-primary btn-lg" (click)="showModal()">Show Modal</button>
</p>
<ng-template #modal>
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" [attr.id]="modalLabelledById">What's Up?</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Hey! Here's some modal content.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary"
        data-dismiss="modal">Close Modal</button>
    </div>
  </div>
</ng-template>

Instantiate your component class with the ModalService and a reference to the modal template and provide some method to show the modal...

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from 'nzbs-modal';

@Component({
  selector: 'app-minimal-demo',
  templateUrl: './minimal-demo.component.html',
  styleUrls: ['./minimal-demo.component.scss']
})
export class MinimalDemoComponent {
  @ViewChild('modal') modal: TemplateRef<any>;
  constructor(
    private modalService: ModalService
  ) { }

  showModal() {
    this.modalService.show(this.modal);
  }
}

View full source for this minimal example.

Hiding a modal

In the minimal example above, we used the native Bootstrap data-dismiss="modal" attribute to close the modal. Modals can also be closed programmatically, for example, after a successful form submission. ModalService.show() returns an instance of IModalInstance, which comes with a hide() method.