DEV Community

loading...

Discussion on: 3 Ways to Render Large Lists in Angular

Collapse
theodesp profile image
Theofanis Despoudis

One other way:

Don't render 1000 items.
Render only first 100 and add a load more button. If the user wants to load more then they need to click on the button and render the next 100. Simple and easy.

Collapse
gc_psk profile image
Giancarlo Buomprisco Author

Pagination or your solution are definitely other viable ways - but present the same usability limitations as virtual scrolling.

In my case, this was not an option: I have to render thousands of fonts within a dropdown. No other solution has a "click here to load more fonts" button - so I'd be at a disadvantage. This would definitely be a UX limitation for my users.

At the end of the day:

  • do you need to display everything? The solutions above may work
  • do you not? Great! Pagination and Load More could definitely be a solution too
Collapse
theodesp profile image
Theofanis Despoudis

You can replace the load more button with a Visibility trigger or a component that calls a callback when the element is in view port, Then, you will trigger a load more action automatically.