import { Component, ViewEncapsulation } from '@angular/core'; import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'app-ngbd-modal', templateUrl: './modal.component.html' }) export class NgbdModalBasicComponent { closeResult: string; constructor(private modalService: NgbModal) {} // This is for the first modal open1(content1) { this.modalService.open(content1, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } // This is for the Second modal open2(content2) { this.modalService.open(content2, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => { this.closeResult = `Closed with: ${result}`; }, (reason) => { this.closeResult = `Dismissed ${this.getDismissReason(reason)}`; }); } // This is for the Third varios modal options openBackDropCustomClass(content3) { this.modalService.open(content3, {backdropClass: 'light-blue-backdrop'}); } openWindowCustomClass(content3) { this.modalService.open(content3, { windowClass: 'dark-modal' }); } openSm(content3) { this.modalService.open(content3, { size: 'sm' }); } openLg(content3) { this.modalService.open(content3, { size: 'lg' }); } openVerticallyCentered(content3) { this.modalService.open(content3, { centered: true }); } openstackmodal(contentstack) { this.modalService.open(contentstack, {size: 'lg'}); } opensubmodal(contentsubmodal) { this.modalService.open(contentsubmodal, {size: 'lg'}); } 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}`; } } }