Close Angular Modal when I click on the X button-CodePudding

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  target="_blank" (click)="openDialog()">
        <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" >
    </a>

<dialog id="my-dialog-pubcrawl" >
   
   <div >
    <div >This is a dialog window</div>

    <div  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?

CodePudding user response：

One way of achieveing that is to store the instance of the dialog and call the close method:

<a  target="_blank" (click)="openDialog()">
        <img src="assets/img/mywork-img/portfolio-05.jpg" alt="" >
    </a>

<dialog id="my-dialog-pubcrawl" >
   
   <div >
    <div >This is a dialog window</div>

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