Step 1
NPM command :
ng new modal-example
Step 2
create a new component :
ng g c ngx-bootstrap-modal
Step 3
Install ngx-bootstrap from npm using command :
npm install ngx-bootstrap --save
Step 4
- Now let’s add bootstrap styles in our index.html file.
For Bootstrap 4 :-
<linkhref=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”rel=”stylesheet”>
Step 5
- Let add the template in our ngx-bootstrap-modal.component.html.
<h2 style="text-align: center;">Example of Ngx-Bootstrap Modal</h2>
<div style="width: fit-content;margin: auto;margin-top: 18px;">
<button type="button" class="btn btn-primary" (click)="openModalWithClass(template)">Open modal</button>
</div>
<br>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>List of my upcomming articles in C# Corner</h3>
<ul>
<li>Use of Ngx-Bootstrap Modal in Angular 8</li>
<li>Use of Ngx-Bootstrap Progres Bar in Angular 8</li>
<li>Use of Ngx-Bootstrap Datepicker in Angular 8</li>
<li>Use of Ngx-Bootstrap Timepicker in Angular 8</li>
<li>Use of Ngx-Bootstrap Dropdown in Angular 8</li>
<li>Use of Ngx-Bootstrap Sortable in Angular 8</li>
<li>Use of Ngx-Bootstrap Collapse in Angular 8</li>
<li>Use of Ngx-Bootstrap Carousel in Angular 8</li>
<li>Use of Ngx-Bootstrap Typehead in Angular 8</li>
</ul>
<h3>You can check my all C# Corner Articles <a href="https://www.c-sharpcorner.com/members/siddharth-gajbhiye">here</a></h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>
</div>
</ng-template>
Step 6
- Now, open the ngx-bootstrap-modal.component.ts file and add the following code in this file:
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-modal-popup',
templateUrl: './modal-popup.component.html',
styleUrls: ['./modal-popup.component.css']
})
export class ModalPopupComponent implements OnInit {
modalRef: BsModalRef;
constructor(private modalService: BsModalService) { }
ngOnInit() {
}
openModalWithClass(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(
template,
Object.assign({}, { class: 'gray modal-lg' })
);
}
}
- The below code is opening the modal popup:
this.modalRef = this.modalService.show(template)
- And the below code is to hide the opened modal:
this.modalRef.hide();
Step 7
- Now, open the app.component.html file and add the following code:
<app-modal-popup></app-modal-popup>
Step 8
- Let’s open the app.module.ts file and add the following code:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ModalPopupComponent } from './modal-popup/modal-popup.component';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
declarations: [
AppComponent,
ModalPopupComponent
],
imports: [
BrowserModule,
ModalModule.forRoot(),
FormsModule,
ReactiveFormsModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
Output :-
