title: NgbModal of ng-bootstrap is not working
body: <p>I have tried adding the modal box in my one of the page and for that i have gone through the document provided by the ng-bootstraphttps://ng-bootstrap.github.io/#/components/modal/examples</p>
  
  <p>To achieve the modal dialog box i have written the code inside the components/invoice/modal
  <a href="https://i.stack.imgur.com/2BgPK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2BgPK.png" alt="enter image description here"></a></p>
  
  <p>I have written the modal component as is what the online document is provided.</p>
  
  <p><strong>modal.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
  
  @Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
  })
  export class ModalComponent implements OnInit {
    closeResult: string;
  
    constructor(private modalService: NgbModal) { }
  
    open(content) {
      this.modalService.open(content).result.then((result) =&gt; {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) =&gt; {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
    }
  
    private getDismissReason(reason: any): string {
      if (reason === ModalDismissReasons.ESC) {
        return 'by pressing ESC';
      } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
        return 'by clicking on a backdrop';
      } else {
        return  `with: ${reason}`;
      }
    }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p><strong>modal.component.html</strong></p>
  
  <pre><code>&lt;ng-template #content let-c="close" let-d="dismiss"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
      &lt;button type="button" class="close" aria-label="Close" (click)="d('Cross click')"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;One fine body&amp;hellip;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-outline-dark" (click)="c('Close click')"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/ng-template&gt;
  
  &lt;tr&gt;
    &lt;td&gt;
      &lt;p data-placement="top" data-toggle="tooltip" title="Add"&gt;
        &lt;button class="btn btn-primary btn-xs" data-title="Add" data-toggle="modal" data-target="#add" (click)="open(content)"&gt;
          &lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt;
        &lt;/button&gt;Add Invoice
      &lt;/p&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I have used this component in other component that is </p>
  
  <p><strong>invoice.component.html</strong></p>
  
  <pre><code>&lt;app-modal&gt;&lt;/app-modal&gt;
  </code></pre>
  
  <p>In <strong>app.module.ts</strong>, the following code is added</p>
  
  <pre><code>import {FormsModule,ReactiveFormsModule} from '@angular/forms';
  import { JsonpModule } from '@angular/http';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  import { ModalComponent } from './components/invoice/modal/modal.component';
  
  @NgModule({
  declarations: [
  ModalComponent
  ],
  imports: [
  NgbModule,
  JsonpModule,
  NgbModule.forRoot()
  ]
  </code></pre>
  
  <p>So with this nothing is working, like when i click on the Add Invoice button then entire application is freezed like no other links are clickable on the application. For that i have checked in the console there also no error message comes. Can anyone help me? What is the mistake i made?</p>
  
  <p>Thanks.</p>