ngFor is directive that iterates through a list of data and instantiates a template for each item in the list. It does an amazing job when dealing with small list. The issue with ngFor is that it loads everything on DOM, which is slow – possibly iterating over hundreds of items and rendering them.

This can impact the performance negatively by hogging memory and processing power. On top of that, any change to a single item on the list, the whole list is re-rendered. There are workaround for this, one option is to  paginate results. In this case, you display a portion of the data to the user and let the user move through the data in sets, like a book. This is great for performance but not great for the user experience since the user must always click on the next button to navigate through the data.

So, where am I going with this? In this post, I am going to look at two solutions for working with large lists in Angular without sacrificing the user experience or performance. So, without further ado.

Using angular2-virtual-scroll

Let’s take this scenario, you have 1000 items to display. If you used ngFor, all of them would be rendered, but with this library, it will only display the section of the list which is on the view point. This could be about 5 items out of a possible 1000 Items.

As you scroll down, the library will remove items not in view and add new items, maintaining a constant number of items on display. This greatly improves performance, because only a small number of items are rendered in the dom. It also provides an event trigger to dynamically load more content – for instance, from a Rest API endpoint.

Combine this with a Service Worker, and you will see incredible performance improvement in your angular app. You can watch a demo for this library in action here. To get started using this library, install it using your favorite package manager:

$ yarn add angular2-virtual-scroll

$ npm install angular2-virtual-scroll --save

Then, import the package into your app module (for lazy loaded modules, import it under a shared module or in the lazy loaded module you are going to use it).

import { VirtualScrollModule } from 'angular2-virtual-scroll';

And then, add it to your imports array:

...
imports: [
  ...
  VirtualScrollModule
],
...

Now, you can use it in your app, as follows:

<virtual-scroll [items]="items" (vsUpdate)="viewPortItems = $event">
  <my-custom-component *ngFor="let item of viewPortItems">
  </my-custom-component>
</virtual-scroll>

NB: As you can see from the above demo, the library determines the items in view point and creates a list of those items which you can iterate through using ngFor.

You can visit the documentation of the library here. And you can also find some samples here.

Using ngVFor Libraries

This is a relatively new library – about a month old as of the time of writing. The authors of this library intended it to be used as a direct replacement of ngFor. Hence calling it Virtualization for ngFor (ngVFor). What caught my eye was the incredible performance gain being promised. I mean 90 times faster than ngFor cannot be ignored. It works exactly like ngFor, and you can replace globally all your ngFor directives with ngVFor directive and you will still see some performance gain.

<div class="data-list-items-container" ***ngVFor**="let row of testData"></div>

But to fully realize the promised performance gain though, you must wrap your ngVFor around a virtualization container.

**<nggud-items-control></nggud-items-control>**

Just like the Angular Virtual Scroll library above, this will measure the view point and pass that information to the *ngVFor directive to only display items on view point, this allows for faster rendering and faster scroll through your content. For more information about the performance benefits and technical details, visit this blog post on medium.

To get started using this library, install it using your favorite package manager:

$ yarn add ngvforlib

$ npm install ngvforlib

Then, import it to your app module:

import { NgGUDCoreModule } from 'ng-vfor-lib';

And then add it to the list of your imports:

...
imports: [ 
  ...,
  NgGUDCoreModule
  ],
  ...

And finally, you can use inside your components:

<nggud-items-control>
  <div class="data-list-items-container" *ngVFor="let row of testData">
    <!-- ... -->
  </div>
</nggud-items-control>

If you want to understand how it works, please visit this blog post here.

Conclusion These two libraries – one new and the other old are great for

handling large lists in angular. I am quite sure, they are not the only once out there. If you have any library that I should add to this list, you can post it on the comment section below and I will have a closer look at it. For tables, I suggest using something like Angular CdkTables or something similar which provides features for displaying data inside tables.