Hi, There,
While developing the Angular web application the most common task needs to show a modal window to the website. Here, Today I will show you the common and easy way to implement a modal window into Angular site. Once you look into this and tried by your self you will feel how easy it is.
In here I am displaying modal window into two ways,
1) By Using Angular Material Library
2) By Using NGBootstrap Library
Lets, Drive into a coding part now
1) By Using Angular Material Library
Step 1) ADD Angular Material into your project
To use the Angular material Library Modal window feature you need to have Material Library install in your project. Here is the process to get Library.
– From Angular CLI run this command
ng add @angular/material
If you need more details information for adding Material Library you can visit this site https://material.angular.io/guide/getting-started
Step 2) Import MatDialogModule to the @NgModule
import {MatDialogModule} from '@angular/material';
@NgModule({
...
imports: [MatDialogModule, ...],
...
})Step 3) Create component having show button (form where you want to show modal window)
From CLI you can run this command
ng g c nameofcomponentadd following code in component.ts
import {Component, OnInit} from '@angular/core';
import {MatDialog} from '@angular/material';
import {MessageDialogComponent} from './message-dialog/message-dialog.component';
@Component({
selector: 'app-windowsystem',
templateUrl: './windowsystem.component.html',
styleUrls: ['./windowsystem.component.scss']
})
export class WindowsystemComponent implements OnInit {
message: string;
racf: string;
ndate: any;
comments: string;
constructor(public dialog: MatDialog) {
this.message = 'Is tomorrow holiday????';
this.racf = 'GHAFF';
this.ndate = new Date();
this.comments = '';
console.log(this.ndate);
}
ngOnInit() {
}
previewMessage(): void {
const dialogRef = this.dialog.open(MessageDialogComponent, {
width: '500px',
data: {message: this.message, racf: this.racf, ndate: this.ndate}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed' + result);
this.comments = result;
});
}
}
export interface NotificationModal {
racf: string;
ndate: any;
message: string;
}
add the following code in component.html
<p>Fill the below form..</p>
<ol>
<li>Date :- <input type="date" placeholder="choose the date" [(ngModel)]="ndate"></li>
<li>Racf :- <input type="text" placeholder="Racf ID" [(ngModel)]="racf"></li>
<li>Message :- <input type="text" placeholder="Notification Message" [(ngModel)]="message"></li>
</ol>
<button type="button" (click)="previewMessage()">Privew Message</button>
<p *ngIf="comments">Your comments is {{comments}}</p>
step 4) Create a modal window component
ng g c modalwindowcomponentadd following code in modalwindowcomponent html file
<h1 mat-dialog-title>Notification</h1>
<div mat-dialog-content>
<p>{{data.message}}</p>
</div>
<p>Please add your comments here !!!</p>
<input type="text" name="comments" value="comments" [(ngModel)]="comments">
<div>{{data.racf}}</div>
<div>{{data.ndate}}</div>
<button (click)="nothanks()">No Thanks</button>
<button [mat-dialog-close]="comments" cdkFocusInitial>Add comments</button>
add following code in modalwindowcomponent ts file
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
@Component({
selector: 'app-message-dialog',
templateUrl: './message-dialog.component.html',
styleUrls: ['./message-dialog.component.scss']
})
export class MessageDialogComponent implements OnInit {
comments: any;
constructor(@Inject(MAT_DIALOG_DATA) public data,
public dialogRef: MatDialogRef<MessageDialogComponent>) {
console.log(data);
}
ngOnInit() {
}
nothanks() {
this.dialogRef.close();
}
}
That’s all once you run your server you will get from having Preview Message Button. Once click on the button the modal window will be open.
In this example, you can share data between parent and child components as well.
2) By Using NgBootstrap Library
Step 1) Add Ngbootstrap into your project
From CLI run this command
npm install –save @ng-bootstrap/ng-bootstrap
In angular.json file under style, section add
“styles”: [ “node_modules/bootstrap/dist/css/bootstrap.min.css” ]
Add @NgModule
import {NgbModule} from ‘@ng-bootstrap/ng-bootstrap’;
@NgModule({ … imports: [NgbModule, …], … })
For more details visit :
https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap
Add bootstrap in your project, In package.json add
“bootstrap”: “^4.3.1”, and run npm install .
Step 2) Create component having show button (form where you want to show modal window)
From CLI you can run this command
ng g c nameofcomponentadd following code in component.ts
import {Component, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {ModalWindowComponent} from './modal-window/modal-window.component';
import {Sms} from '../model/sms';
@Component({
selector: 'app-window-using-ngb-modal',
templateUrl: './window-using-ngb-modal.component.html',
styleUrls: ['./window-using-ngb-modal.component.scss']
})
export class WindowUsingNgbModalComponent implements OnInit {
public sms: Sms;
success: boolean;
failure: boolean;
constructor(private modalService: NgbModal) {
this.sms = new Sms();
this.sms.message = '';
this.sms.phonenumber = 0;
this.sms.email = '';
this.success = false;
this.failure = false;
}
ngOnInit() {
}
showwindow() {
const modalRef = this.modalService.open(ModalWindowComponent, {size: 'lg'});
modalRef.componentInstance.sms = this.sms;
modalRef.result.then((result) => {
console.log(result);
},
(result) => {
console.log(result);
});
}
sendMessage() {
if (this.sms.phonenumber) {
this.success = true;
this.failure = false;
} else {
this.failure = true;
this.success = false;
}
}
}
export class Sms {
message: string;
phonenumber: number;
email: any;
}
add following code in component.html
<p>To download the ng bootstrap use npm install --save @ng-bootstrap/ng-bootstrap
</p>
<h2>Write your message</h2>
<label>Message :- </label><input style="width: 20%" type="text" placeholder="type your complete message"
[(ngModel)]="sms.message"> <br><br>
<button (click)="showwindow()">Preview Message</button><br><br>
<label *ngIf="!sms.phonenumber">Please add phone number in the preview section</label><br>
<strong *ngIf="sms.phonenumber || sms.message || sms.email">Your complete message </strong>
<h3 *ngIf="sms.message && sms.message!=''">Message :- {{sms.message}}</h3>
<h3 *ngIf="sms.phonenumber">Phone :- {{sms.phonenumber}}</h3>
<h3 *ngIf="sms.email">Email :- {{sms.email}}</h3>
<button (click)="sendMessage()">Send Message</button>
<br><br>
<div *ngIf="success" class="alert alert-warning" role="alert">Successfully submitted your request.......</div>
<div *ngIf="failure" class="alert alert-danger" role="alert">Something wrong in your request</div>
step 3) Create a modal window component
ng g c modalwindowcomponentadd following code in modalwindowcomponent html
<div class="form-group">
<div class="modal-header">
<span class="modal-title">Send your message</span>
<button (click)="close()" aria-label="Close" class="close" type="button">
<span aria-hidden="true">X</span>
</button>
</div>
<div>
<label>Message :- </label><input [value]="sms.message" disabled="disabled" type="text">
<br>
<label>Phone number:- </label><input [(ngModel)]="sms.phonenumber" phoneNumber>
<br>
<label> Email :- </label><input [(ngModel)]="sms.email" type="email">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-light" (click)="close()">Submit</button>
</div>
And below code is in ts file add
import {Component, OnInit} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {Sms} from '../../model/sms';
@Component({
selector: 'app-modal-window',
templateUrl: './modal-window.component.html',
styleUrls: ['./modal-window.component.scss']
})
export class ModalWindowComponent implements OnInit {
public sms = new Sms();
constructor(private activeModal: NgbActiveModal) {
}
ngOnInit() {
}
close() {
this.activeModal.close(this.sms);
}
}
That’s all once you run your server you will get from having Preview Message Button. Once click on the button the modal window will be open.
In this example, you can share data between parent and child components as well.
