Angular - ng2-pdfjs-viewer not getting initialized when used within ngIf div

Question

component.html

There is an option to select file using input element of file type as shown below. The selected file should get displayed in the div having pdfViewer. By default this div is not displayed in DOM. This is defined using *ngIf='isCeFile' on the div. i.e. by default isCeFile = false

        <div class='flex-align-center'>
          <span style="font-weight: 500;">Client Email pdf: </span>
          &nbsp;
                
          <mat-icon color='primary' (click)="ceFilePicker.click()" style="cursor: pointer;">
            add_circle
          </mat-icon>
        </div>

        <input type="file" accept=".doc, .docx, .pdf"
         (change)="onChange($event, 'CLIENT-EMAIL')" (click)="$event.target.value=null"
         #ceFilePicker style="margin: 0; visibility: hidden;">

      // PDF Viewer Div
      <div class='flex' *ngIf='isCeFile'>
        <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>

component.ts

The method handling file input changes the variable that is used in ngIf for pdfViewer div. However, at the time this method is executed the div is not initialized. Hence, pdfViewer element is not defined. And so the selected file does not get assigned to pdfViewer.

Is there any way to initialize the div, i.e. initialize pdfViewer element, within onChange() method before the statement this.pdfViewerAutoLoadCE.pdfSrc = this.clientEmailFile;

  isCeFile = false;
  @ViewChild('pdfViewerAutoLoadCE') pdfViewerAutoLoadCE;

  onChange(event, docType) {
    
      this.clientEmailFile = event.target.files[0];
      this.ceFileChanged = true;
      this.isCeFile = true;
      console.log('this.pdfViewerAutoLoadCE', this.pdfViewerAutoLoadCE);
      // console output: undefined
      
      this.pdfViewerAutoLoadCE.pdfSrc = this.clientEmailFile;
      this.pdfViewerAutoLoadCE.refresh();

  }

As of now I am using this without the ngIf on pdfViewer div and it works fine. However, it is required to display this div only when required, so that empty space is not displayed on page.

Answer 1

One way could be to use ng-template instead. Show something else if this condition is not met. So the div changes when the when boolean is turned. As I'm not exactly sure which div you meant to be rendered and which not, you may have to change the depth of *ngIf="isCeFile; else noFile", but I hope you get the idea. https://angular.io/api/common/NgIf#showing-an-alternative-template-using-else

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

</div>
</div>

<ng-template #noFile>
   <div> 
   Oops, no file.
   </div>
</ng-template>