PrimgNg p-listBox Performance issue

Question

I am using PrimgNg Listbox trying to load 20,000 values in the listbox coming from API which is causing the application to crash and delay and having the performance issue. Kindly help me how to improve the performance of the application

<p-listbox [options]="Filters.segmentList" [(ngModel)]="selectedSegements" [multiple]="true" optionLabel="name" [listStyle]="{'max-height':'250px'}">
  <ng-template pTemplate="header">
    <div>Segments&nbsp;|&nbsp; Description
    </div>
  </ng-template>
  <ng-template let-segment pTemplate="item">
    <div class="segment-item">
      <div>{{segment.segment_cd}}&nbsp;|&nbsp; {{segment.segment_desc}}
      </div>
    </div>
  </ng-template>
</p-listbox>

Answer 1

You need infinite/virtual scroll to support such huge dataset. Primeng listbox doesn't support that. But primeng table does. You can use primeng table and write a wrapper over it to support listbox like functionality.

https://www.primefaces.org/primeng/table