Performance: Drop down opening slow when repeated in NgFor

[brandoncollins]

The dropdown components open performance is affected by the # of other dropdown components on the page. I know this is not great UX, but I have a table of ~1000 items which have a dropdown component in one of the cells, similar to the example provided.

http://plnkr.co/edit/IsdAtHkPQ4FnF8kYaRGA?p=preview

ng-bootstrap version: alpha.8

[pkozlowski-opensource]

Yeh, the global click handler (one that is used to close dropdowns on the outside clicks) is to blame here. Normally it is not an issue since in an app you would have just a limited number of dropdowns.

As you've noticed it isn't a common scenario so you might want to roll out your own version of the dropdown directive that is tailored to your needs. We are going to look at this scenario but not as an immediate priority.

[pkozlowski-opensource]

One of the potential solutions would be to have a global service that tracks outside clicks and registers all the dropdown directives (it could probably be also useful to track outside clicks for other directives - ex.: datepicker popups).

Here is a sketch of the solution: http://plnkr.co/edit/LvmpFxzCSRjlZCNU8Osm?p=preview
Obviously the above is very hacky (uses DOM API directly, isn't playing great with zones etc.) but that's the general idea.

[wesleycho]

In the meantime, I'd probably recommend implementing some sort of virtual scrolling to avoid having that many elements rendered at once. It seems like wasteful performance to have that many elements rendered at once.

[ngi80]

Hello,
I have the same issue with a collapse element i applied on a 'card-block'.
Does the solution you mentioned previously could also solve my issue ?

I have a lot of card in card representing a tree of elements.

Thank you,

[thbt]

I found a way to improve the performance using the renderer and dynamically registering listener : http://plnkr.co/edit/SXEy855KQQQYXgjI5Fqc?p=preview
Should I put up a PR with this ?

[daevid66]

thbt's solution is exactly what I was about to implement, before searching. Please accept his/her pr.

[thbt]

@daevid66 I would like to do a PR but some tests are failing (while it works in the browser)
If you want to help you can check my fork

[laserus]

@wesleycho Do you have any example of working virtual scroll for ng2?

As far as I know, there is nothing solid and we all are waiting for angular/components#823

[daBishMan]

when is this going to be merged and released please?

[PatrykTucki]

Are there any updates on this issue? Using ~30 dropdowns literally kills the app performance.

[mscudlik]

I think Renderer2 should be used instead of the deprecated Rendererso that it should also work with the angular-universal approach and i suggest to use NgZone so that it runs completely outside of the angular change detection because the change detection is the performance killer here, not the event

[codepwner]

+1 I need a resolution for this issue please!

[liviu-c]

+1
Any updates on this?
Is this gonna be fixed in the near future?

[pkozlowski-opensource]

Is this gonna be fixed in the near future?

We should have it covered in one of the next releases.

[daibertdiego]

+1

[rfrancisco]

Any news regarding this?

[liviu-c]

nothing new on this?

[kuhlschrank]

+1

[AntonLebiodkin]

+1

[rightisleft]

+1

[Rayno42]

+1

[Zak-C]

+1

[germanpa]

+1

[gpsimmo]

Is there any update on this issue?!

[rpelavin]

+1

[kyrare]

+1

[Md-Aman]

+1

[rysilva]

I'd like to just echo that it's not just thousands that will cause this issue, and not always bad UX that causes this issue. We have a tabular UI where each row has two dropdowns. I don't think 50 rows warrants implementing virtual scrolling, but that's 100 dropdowns and a noticeable delay (500ms or more). With 100-200 rows, it's unusuable.

(edit: well that's embarrassing, I didn't realize I was commenting on ng-bootstrap rather than ngx-bootstrap, which I use. Well, I guess my point is probably still valid)

[alfazjikani]

Issue is being fixed by below work around for ngx-bootstrap dropdown.

`<table>
<tr *ngFor="let item of arr;">
...
<td class="cell-checkbox text-right vmiddle">

<span *ngIf="!item.show" class="fa fa-cog no-space dropdown-toggle pointer m-r" title="Options" (mouseleave)="item.show=false" (mouseenter)="item.show = true"></span>

<div *ngIf="item.show" class="dropdown-holder m-r" dropdown>
 <span dropdownToggle class="fa fa-cog dropdown-toggle pointer" title="Options"></span>
 <ul *dropdownMenu class="dropdown-menu">
  <li role="menuitem">
   <a class="dropdown-item pointer"> Option 1 </a>
  </li>
 </ul>
</div>

</td>
</table>`