onDocumentLoad does not fire when the viewer is hidden

[anees-tricon]

I am trying to do a simple show hide use case. i will show a loading icon and hide the pdfjs viewer initially and in onDocumentLoad i toggle the boolean so that the loader goes away and the pdf is visible.

What i observe is, if the pdfjs viewer is hidden, the event does not trigger. Is that by design?

<div class="pdf-container" [hidden]="isLoading">
      <ng2-pdfjs-viewer
        #pdfViewer
        [showSpinner]="true"
        [openFile]="false"
        [download]="true"
        [print]="true"
        [viewBookmark]="false"
        viewerId="document"
        (onDocumentLoad)="loadComplete()"
        pagemode="none"
      >
      </ng2-pdfjs-viewer>
</div>

<div class="pdf-container" [class.hide]="isLoading"> 
      <ng2-pdfjs-viewer
        #pdfViewer
        [showSpinner]="true"
        [openFile]="false"
        [download]="true"
        [print]="true"
        [viewBookmark]="false"
        viewerId="document"
        (onDocumentLoad)="loadComplete()"
        pagemode="none"
      >
      </ng2-pdfjs-viewer>
</div>

//css file
.hide {
  display: none;
}

// component ts
loadComplete() {
  this.isLoading = false;
}

Even if its hidden via the parent using [hidden] or by css the event is not getting triggered.

[anees-tricon]

It works though if i use visibilty:hidden

<div class="pdf-container" [class.invisible]="isLoading"> 
      <ng2-pdfjs-viewer
        #pdfViewer
        [showSpinner]="true"
        [openFile]="false"
        [download]="true"
        [print]="true"
        [viewBookmark]="false"
        viewerId="document"
        (onDocumentLoad)="loadComplete()"
        pagemode="none"
      >
      </ng2-pdfjs-viewer>
</div>

// css
.invisible {
  visibility: hidden
}

[codehippie1]

Closing as the user achieved desired outcome