0

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.

hemant
  • 377
  • 1
  • 2
  • 13

1 Answers1

0

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>
Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Joosep, somehow I couldn't make it work. May be I did not code it right. Not sure if ng-template gets initialized even when the condition is not true. However, I used this if else idea by using ngClass and setting the visibility of div as hidden or otherwise. And it worked. – hemant Feb 01 '22 at 06:35
  • Okay. Good, yes there was small syntax error - I have updated my code. – Joosep Parts Feb 01 '22 at 07:35