Angular Modal
Our Angular modals are lightweight and multi-purpose popups that are
built with HTML, CSS, and JavaScript. The three primary sections of
a Angular modal are header, body, and footer. Modals are positioned
over everything else in the document and remove scroll from the
<body> so that modal content scrolls instead. Use
Angular’s JavaScript modal plugin to add dialogues to your site for
lightboxes, user notifications, or completely custom content.
Keep reading our Bootstrap Modal examples and learn how to use it.
Example
<ng-template #classic3 let-c="close" let-d="dismiss">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default">Modal title</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" (click)="c('Close click')">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</ng-template>
<!-- Typescript -->
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, type, modalDimension) {
if (modalDimension === 'sm' && type === 'modal_mini') {
this.modalService.open(content, { windowClass: 'modal-mini', size: 'sm', centered: true }).result.then((result) => {
this.closeResult = 'Closed with: $result';
}, (reason) => {
this.closeResult = 'Dismissed $this.getDismissReason(reason)';
});
} else if (modalDimension === '' && type === 'Notification') {
this.modalService.open(content, { windowClass: 'modal-danger', centered: true }).result.then((result) => {
this.closeResult = 'Closed with: $result';
}, (reason) => {
this.closeResult = 'Dismissed $this.getDismissReason(reason)';
});
} else {
this.modalService.open(content,{ centered: true }).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() {
}
}Variations
<div class="row">
<div class="col-md-4">
<button class="btn btn-block btn-primary mb-3" (click)="open(classic,'' , '')">
Default
</button>
<ng-template #classic let-c="close" let-d="dismiss">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-default">Type your modal title</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-link ml-auto" data-dismiss="modal" (click)="c('Close click')">Close</button>
</div>
</div>
</ng-template>
</div>
<div class="col-md-4">
<button class="btn btn-block btn-warning mb-3" (click)="open(classic2, 'Notification', '')">
Notification
</button>
<ng-template #classic2 let-c="close" let-d="dismiss">
<div class="modal-content bg-gradient-danger">
<div class="modal-header">
<h6 class="modal-title" id="modal-title-notification">Your attention is required</h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="py-3 text-center">
<i class="ni ni-bell-55 ni-3x"></i>
<h4 class="heading mt-4">You should read this!</h4>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white">Ok, Got it</button>
<button type="button" class="btn btn-link text-white ml-auto" data-dismiss="modal" (click)="c('Close click')">Close</button>
</div>
</div>
</ng-template>
</div>
<div class="col-md-4">
<button class="btn btn-block btn-default" (click)="open(classic1, 'modal_mini', 'sm')">
Form
</button>
<ng-template #classic1 let-c="close" let-d="dismiss">
<div class="modal-content">
<div class="modal-body p-0">
<div class="card bg-secondary shadow border-0">
<div class="card-header bg-white pb-5">
<div class="text-muted text-center mb-3">
<small>Sign in with</small>
</div>
<div class="btn-wrapper text-center">
<a href="javascript:void(0)" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon">
<img src="./assets/img/icons/common/github.svg">
</span>
<span class="btn-inner--text">Github</span>
</a>
<a href="javascript:void(0)" class="btn btn-neutral btn-icon">
<span class="btn-inner--icon">
<img src="./assets/img/icons/common/google.svg">
</span>
<span class="btn-inner--text">Google</span>
</a>
</div>
</div>
<div class="card-body px-lg-5 py-lg-5">
<div class="text-center text-muted mb-4">
<small>Or sign in with credentials</small>
</div>
<form role="form">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-email-83"></i></span>
</div>
<input class="form-control" placeholder="Email" type="email">
</div>
</div>
<div class="form-group">
<div class="input-group input-group-alternative">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-lock-circle-open"></i></span>
</div>
<input class="form-control" placeholder="Password" type="password">
</div>
</div>
<div class="custom-control custom-control-alternative custom-checkbox">
<input class="custom-control-input" id=" customCheckLogin" type="checkbox">
<label class="custom-control-label" for=" customCheckLogin">
<span>Remember me</span>
</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>
</ng-template>
</div>
</div>
<!-- Typescript -->
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, type, modalDimension) {
if (modalDimension === 'sm' && type === 'modal_mini') {
this.modalService.open(content, { windowClass: 'modal-mini', size: 'sm', centered: true }).result.then((result) => {
this.closeResult = 'Closed with: $result';
}, (reason) => {
this.closeResult = 'Dismissed $this.getDismissReason(reason)';
});
} else if (modalDimension === '' && type === 'Notification') {
this.modalService.open(content, { windowClass: 'modal-danger', centered: true }).result.then((result) => {
this.closeResult = 'Closed with: $result';
}, (reason) => {
this.closeResult = 'Dismissed $this.getDismissReason(reason)';
});
} else {
this.modalService.open(content,{ centered: true }).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() {
}
}