How to improve prime ng dropdown performance for huge data

Question

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.

Answer 1

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.

Answer 2

You should fork primeng repo and change implementation in multiselect component (line 51)

It uses *ngFor ti list values, but you should change it with ng2-vs-for

The difference beweeet ngFor and vs-for is that not all elements added to the dom at once, but only the items you should see according to the scroll position.

Answer 3

Rather than fork the library, which leaves you stuck on a specific version, I identified which dropdowns had so many values that they were lagging and changed these primeng dropdowns for primeng autocompletes and the lag was gone.