0
477
VistasClose Angular Modal when I click on the X button
I am learning Angular and I made a Modal in my project. If I click on the class that has the openDialog() function it opens the modal.
I want to be able to close that modal as well when I click on the 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>
.ts file: This opens the modal
openDialog() {
let myDialogPubcrawl:any = <any>document.getElementById("my-dialog-pubcrawl");
myDialogPubcrawl.showModal();
}
The Modal:
How can I close the modal by clicking on the X in Angular?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
One way of achieveing that is to store the instance of the dialog and call the close method:
<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
Denunciar
Responde la pregunta