Angular - ng Bootstrap | NG-MODAL
https://ng-bootstrap.github.io/#/components/modal/examples
NG Modal example
<ng-template #setalert let-modal>
<div class="set-alert">
<div class="close">
<a href="javascript:" (click)="modal.dismiss('Cross click')">
<img src="/assets/images/close.png">
</a>
</div>
content here
</div>
</ng-template>
<a href="javascript:" (click)="open(setalert)">Open box</a>
ts File
import {ModalDismissReasons, NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
constructor(private modalService: NgbModal) {
}
open(content) {
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}`;
}
}
NG Modal example
<ng-template #setalert let-modal>
<div class="set-alert">
<div class="close">
<a href="javascript:" (click)="modal.dismiss('Cross click')">
<img src="/assets/images/close.png">
</a>
</div>
content here
</div>
</ng-template>
<a href="javascript:" (click)="open(setalert)">Open box</a>
ts File
import {ModalDismissReasons, NgbModal,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
constructor(private modalService: NgbModal) {
}
open(content) {
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}`;
}
}
Comments
Post a Comment