Performance: Drop down opening slow when repeated in NgFor

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

6 thoughts on “Performance: Drop down opening slow when repeated in NgFor

  1. 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.

  2. 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)