Close Angular Modal when I click on the X button

Question

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?

Answer 1

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();
}