openModalAttachment(template: TemplateRef<any>, index: number) { this.index = index; this.getFile(index); this.modalRef = this.modalService.show(template); this.openModalAnexo = true; this.fullScreen(); } onClick(event) { event.stopPropagation(); var modalAnexo = document.getElementById('imgAnexo'); console.log(this.openModalAnexo, modalAnexo); if (this.openModalAnexo && !modalAnexo) { console.log(event.target); this.openModalAnexo = false; modalAnexo = null; this.closeFullScreen(); } } onCloseAttachment() { this.message = 'Declined!'; this.index = -1; this.modalRef?.hide(); this.closeFullScreen(); } closeFullScreen() { document.onclick = function (event) { if (document.fullscreenElement) { event.stopPropagation(); document .exitFullscreen() .then(() => console.log('Document Exited from Full screen mode')) .catch((err) => console.error(err)); } }; } fullScreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } }

 <img src="/assets/icons/eysblue.svg" class="openAtchament" (click)="openModalAttachment(attachment, j)" *ngIf="collapseData.label == 'ANEXOS'"> <ng-template #attachment > <div class="" id="myModal"> <div class="modal-content"> <div class="modalOpenGaley"> <span class="close" (click)="onCloseAttachment().document.getElementById('lightbox')">&times;</span> <embed [src]="file" #files id="imgAnexo" class="files-images-pdf" type="application/pdf"> <img [src]="file" id="imgAnexo" class="files-images-pdf" /> <div id="caption"></div> </div> </div> </div> </ng-template>