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.

Development

This project was generated with Angular CLI version 6.0.3.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.