How to improve prime ng dropdown performance for huge data

Issue

I have used primeng multi-select dropdown in our angular project. But the data which we need to load is very huge like 4-5K elements. So my dropdown takes 10 seconds during loading.

Please suggest me the way to improve the performance to create the multi-select dropdown.

Solution

PrimeNG v8 (and, in my experience, v7) has two documented properties that involve improving performance of MultiSelect inputs with very long lists of options:

[virtualScroll]="true" itemSize="30"

virtualScroll enables the basic performance enhancement but failing to set the itemSize value prevents improved performance.

itemSize affects the amount of vertical space allotted to options in the displayed options panel and 30 provides an acceptable height for rendering a checkbox and adjacent single line of text for each option in that panel.

Typically, when using MultiSelect templating with images or options larger than a single line of text, increasing the itemSize appropriately will be necessary. (Though less likely, you might be able to cram more entries in with a smaller font and a reduced itemSize.)

See "Virtual Scrolling" section of "Documentation" tab in the primefaces.org PrimeNG documentation for MultiSelect.

Answered By - jmmygoggle