Search code examples
angularng2-pdfjs-viewer

Angular ng2-pdfjs-viewer when used with ngIf breaks the html page

I have been using ng2-pdfjs-viewer in Angular components. However, I need the div element to occupy space in DOM only if a condition is met. So I used *ngIf for the div. However, when I use ngIf the page breaks. In console it does not show any error in main window. In console sidebar there is a notification of 4 errors in vendor.js. However, the errors can not be seen.

component.html: the part which uses ng2-pdfjs-viewer

  <div *ngIf='id'>
    /// more code ///

    <div class='flex' *ngIf="pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc">  
    //// this is the *ngIf causing problem
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
      <div style="width: 49%; height: 60vh;" >
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
    </div>
  </div>

If I remove the ngIf condition for the div, the page is displayed correctly. I tried checking the condition's validity or using any other condition, however, the page breaks with any use of ngIf.

Am I missing anything here? Please help.

Edit: Adding the screen shots of rendered component,

without ngIf on pdfViewer div: Correct rendering of elements.

enter image description here

with ngIf (with a simple condition of a variable assigned as true or false)

    <div class='flex' *ngIf="isLoading">
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
      <div style="width: 49%; height: 60vh;" >
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
      </div>
    </div>

erred rendering. When isLoading as set to false, the pdfViewer div disappears from the DOM but the page rendering is messed up as shown below. The rendering is messed up even if isLoading is set to true.

enter image description here

Solution

  • Upon seeing your screenshots, it is still hard to spot the problem, but seems like your template depends on some div placeholders you are removing.

        <div class="flex">
      <div style="width: 49%; height: 60vh; margin-right: 1%;">
       <ng-container *ngIf="isLoading>
        <ng2-pdfjs-viewer #pdfViewerAutoLoadCE
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
       </ng-container>
      </div>
      <div style="width: 49%; height: 60vh;" >
      <ng-container *ngIf="isLoading>
        <ng2-pdfjs-viewer #pdfViewerAutoLoadJD
        [download]="false" [print]="false" [openFile]="false"
        [fullScreen]='false'></ng2-pdfjs-viewer>
       </ng-container>
      </div>
    </div>

    If the above does not help then probably parenting div's size depends on ng-2-pdfjs-viewer's existence in template. You should refactor the parenting div's to work with or without pdf in template.