Load Thousands of Records in Angular ListView

Created: 12 October 2017

In most cases when you have large data you can populate the ListView by incremental load of partial data. However, you may ask is it possible to load thousands of records at once into the ListView component? The IntegralUI ListView component for Angular comes with built-in feature that allows you to load and work with large data in the client.

In above demo, you can choose how many items to display in the ListView. For demonstration purposes only, a limit is set to 100,000 items. In real scenario, the only limit is how much data the browser can handle. By clicking on the Add button, the ListView is populated with custom data.

How to Load Thousands of Records in Angular ListView

At first, in order to populate the ListView with large data, you need to set the virtualMode property to true. This property determines whether virtualization is active or not. When virtualization is active, you can load thousands of records into the ListView but only small part of it is actually displayed in the ListView. Most of the data is kept hidden and it becomes visible by scrolling.

When working with large data, in order to keep high performance, it is best to enclose changes to the ListView layout and other process within calls to suspendLayout and resumeLayout methods. Because update of the component layout is most resource demanding process, calling these methods ensures that layout is updated only once, at the end.

• Angular
• HTML5

@ViewChild('listview') listview: IntegralUIListView;

addItems(){
    for (let i = 1; i <= this.numItems; i++){
        let item: any = {
            text : 'Item ' + i.toString(),
            id: i
        };

        this.items.push(item);
    }
}

add(){
    this.listview.suspendLayout();

    this.clear();
    this.addItems();

    this.listview.resumeLayout();
}

clear(){
    this.listview.clearItems();
    this.listview.updateLayout();
}
                            

<iui-listview #listview [items]="items" [controlStyle]="listStyle" [virtualMode]="true" [itemSize]="{ width: 125, height: 24 }">
    <ng-template let-item>
        <span class="listview-fsld-item-label">{{item.text}}</span>
    </ng-template>
</iui-listview>
<br />
<div align="center">
    <span>Max items:</span> <input class="listview-fsld-input-numeric" type="number" [(ngModel)]="numItems" min="1" max="100000" />
    <button (click)="add()" class="listview-fsld-ctrl-button">Add</button>
    <button (click)="clear()" class="listview-fsld-ctrl-button">Clear</button>
</div>
                            

Note During virtualization all other features like drag drop, keyboard navigation etc are active , while still having a great performance.

If you have a custom data source where objects has custom fields, you can use the loadData method to populate the ListView. This method as parameters accepts an array as data source and also an object that maps the names of fields from your data source to the ones used by the ListView.

Conclusion

Loading thousands of records into the Angular ListView component is possible. You can populate the ListView with large data from a custom data source and still having great performance. Using virtualization allows you to keep high performance, and work with data in the client.

The ListView component is part of IntegralUI Web.