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}`;
    }
  }

Comments

Popular Posts