NgbModal of ng-bootstrap is not working

Question

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

To achieve the modal dialog box i have written the code inside the components/invoice/modal

I have written the modal component as is what the online document is provided.

modal.component.ts

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) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      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() {
  }

}

modal.component.html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>One fine body&hellip;</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

<tr>
  <td>
    <p data-placement="top" data-toggle="tooltip" title="Add">
      <button class="btn btn-primary btn-xs" data-title="Add" data-toggle="modal" data-target="#add" (click)="open(content)">
        <span class="glyphicon glyphicon-plus-sign"></span>
      </button>Add Invoice
    </p>
  </td>
</tr>

I have used this component in other component that is

invoice.component.html

<app-modal></app-modal>

In app.module.ts, the following code is added

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()
]

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?

Thanks.