In PrimeNG, how do I open a p-dialog to the exact dimensions of an image?-CodePudding

I'm using PrimeNG 14 with Angular 14. I would like to open a dialog to the exact size of a downloaded image, but not quite sure how to size a dialog dynamically. Currently I have

<p-dialog [(visible)]="showDialog" [style]="{width: '450px'}" header="My Image" [modal]="true"
 styleClass="p-fluid">
    <img  
        id="myImage"
        [src]="myImage" />
</p-dialog>

In which I download my image using

  this.myService.getFile(this.myId).subscribe({
    next: (response) => {
      const blob = new Blob([response], { type: response.type });
      this.imageSize = this.formatBytes(blob.size);
      const objectURL = URL.createObjectURL(blob);
      this.myImage = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  this.showDialog = true;
    },
    error: (error: Error) => {
      console.log(error);
      console.error("image download error occurred.");
    }
  });

Is there any way to dynamically determine the size of my image and then open the dialog to those dimensions?

CodePudding user response：

Once you remove fixed width from dialog component - it'll fit content inside it.

Here is the demo (stackblitz).