integrate bootstrap modal pop up in angular2

In a angular2 project we were supposed to integrate the bootstrap modal pop up. This will open the pop up on button click.

To integrate the pop up , we have installed the ngx-bootstrap.ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular2

Install ngx-bootstrap using npm

npm install ngx-bootstrap --save

Add needed package to NgModule imports in app.module.ts

import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({

….
imports: [
…
ModalModule.forRoot(),
…
]

})

Integrate the modal in the component
To integrate the pop up in component , app.component.ts, we have to import the below modules.

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

export class AppComponent implements OnInit {

public modalRef: BsModalRef;

constructor(private modalService: BsModalService){

}

openModel(template: TemplateRef){
this.modalRef = this.modalService.show(template,{backdrop: ‘static’});
}

}

In the template file add the below code

<ng-template #search>

  <div class=“modal-header”>

    <button type=“button” class=“close” data-dismiss=“modal” aria-label=“Close” (click)=“modalRef.hide()”>

      <span aria-hidden=“true”>&times;</span></button>

    <h4 class=“modal-title”>Search Product</h4>

  </div>

  <div class=“modal-body”>

      <div class=“row”>

          <div class=“col-lg-8”>

              <div class=“autocomplete”>

                  <input autofocus id=“productname” name=“productname” type=“text” class=“form-control validate filter-input” [(ngModel)]=“productname” placeholder=“Search product by name” autocomplete=“off” >

               </div>

         </div>

      </div>

  </div>

  <div class=“modal-footer”>

      <button type=”button” class=”btn btn-primary pull-right”>Search</button>

  </div>

 </ng-template>