Filepond rendering issue (Angular 2 NPM Package)

[patrickflorianengineer]

Thank you for the help, please see below:

Summary

I am using this NPM Package in Angular 8 File Pond NPM Package

The plugin works well but sometimes it does not render the HTML properly and the functionality does not work. In order to fix it, I have to reload the page. (See image below).

I followed the instructions for implementation to a T but I do include it inside of a div tag with an ngIf is that something that will affect rendering? (See code below)

How to reproduce

• npm install File Pond NPM Package
• Add to desired module
• Implement component.ts code and html tag

Expected behaviour

The filepond html tag should always render and be functional

Additional information

HTML Code (Can provide backend code if needed):

   <div *ngIf="currentPage === 'bulkimport' else nonBulk">
      <file-pond #myPond
      [options]="pondOptions"
      [files]="pondFiles"
      (oninit)="pondHandleInit()"
      (change)="bulkUploadExcel($event)"
      (onremovefile)="bulkUploadRemoveExcel($event)"
      [files]="myFiles"
      type="file"
      multiple="false">
      </file-pond>
    </div>

Screenshots:

Environment	Version
OS	Windows 10
Device	Desktop / IPhone 10X
Browser	Version 79.0.3945.130 (Official Build) (64-bit) & Edge 15

[rikschennink]

It looks like the height of the FilePond element is calculated incorrectly. Can you wrap it in an element with a fixed height and see if that makes a difference.

<div style="height:100px">
<!-- FilePond here -->
</div>

[rikschennink]

I'll close this for now as it's most likely related to the FilePond angular adapter or custom project code instead of the core package

[patrickflorianengineer]

Thank you @rikschennink I will try that and test it out, I appreciate the help