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”>×</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>