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

Question

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.

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.

score 0 · Answer 1 · answered Jan 24 '22 at 13:44

0

Not knowing the contents of pdfViewerAutoLoadCE.pdfSrc || pdfViewerAutoLoadJD.pdfSrc nor seeing the effects of "page broken" it is hard to know for sure whats the problem. But what if you wrap your pdf viewer in ng-container with someCondition upon which the pdf would be shown or not?

If necessary please adjust the ng-container to depth where only pdf-viewer is affected so that your top level div's stay in the template. That should help to keep your page intact.

  <ng-container *ngIf="someCondition">
        <pdf-viewer></pdf-viewer>
  </ng-container>

I have provided a simple example: https://stackblitz.com/edit/ng2-pdf-viewer-tvpgs4?file=src%2Fapp%2Fapp.component.html

If the problem persists please do make a stackblitz to reproduce the problem.

answered Jan 24 '22 at 13:44

Joosep Parts

5,372
2
8
33

Joosep, The problem remains even when I set ngIf on an outer div. I have also edited the original post with screen shots for your view. – hemant Jan 25 '22 at 10:15
1

Seems like your template view depends on some placeholders that you remove with ngIf. – Joosep Parts Jan 25 '22 at 10:31
Yes... You are right. the #pdfViewerAutoLoadCE & #pdfViewerAutoLoadJD was referred to in other part of the template. I have changed it and now it works fine. Thanks. – hemant Jan 25 '22 at 11:13

Joosep Parts · Accepted Answer · 2022-01-25T10:56:01.077

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.

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

2 Answers2