0
475
ViewsCerrar Angular Modal cuando hago clic en el botón X
Estoy aprendiendo Angular e hice un Modal en mi proyecto. Si hago clic en la clase que tiene la función openDialog() , abre el modal.
Quiero poder cerrar ese modal también cuando hago clic en la X.
<a class="portfolio__item" target="_blank" (click)="openDialog()"> <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" class="portfolio__img"> </a> <dialog id="my-dialog-pubcrawl" class="my-dialog"> <div class="np-row"> <div class="np-title">This is a dialog window</div> <div class="np-close-btn" title="Close">X</div> </div> </dialog>Archivo .ts: Esto abre el modal
openDialog() { let myDialogPubcrawl:any = <any>document.getElementById("my-dialog-pubcrawl"); myDialogPubcrawl.showModal(); }El modal:
¿Cómo puedo cerrar el modal haciendo clic en la X en Angular?
·
Juan Pablo Isaza
1 answers
Answer question0
Una forma de lograrlo es almacenar la instancia del diálogo y llamar al método de cierre:
<a class="portfolio__item" target="_blank" (click)="openDialog()"> <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" class="portfolio__img"> </a> <dialog id="my-dialog-pubcrawl" class="my-dialog"> <div class="np-row"> <div class="np-title">This is a dialog window</div> <div class="np-close-btn" title="Close" (click)="closeDialog()">X</div> </div> </dialog> myDialogPubcrawl:any; openDialog() { this.myDialogPubcrawl = <any>document.getElementById("my-dialog-pubcrawl"); this.myDialogPubcrawl.showModal(); } closeDialog() { this.myDialogPubcrawl.close(); }
·
Juan Pablo Isaza
Report
Answer question