{{ cell.name }} ({{ cell.department }})

loadOnScroll

The ux-virtual-scroll component is designed to allow you to display a list of many thousands of items without any noticeable performance degradation.

This virtual scroll component is similar to the infinite scroll directive but will be much more performant with large datasets. One limitation of the virtual scroll component is that each cell must be the same height.

The component supports both a "Load More" button and paging on scroll which can be styled using the *uxVirtualScrollLoadButton structural directive. The loading indicator can also be defined using the *uxVirtualScrollLoading structural directive.

For accessibility, ensure that you apply an appropriate role to the ux-virtual-scroll element and its children. In this example, role="list" and role="listitem" are used respectively. On the cells, specify aria-posinset to indicate the position of the item in the overall collection, and aria-setsize to specify the total number of items if known (use the value -1 otherwise). Finally, the example shows use of LiveAnnouncer to announce the start and end of the loading period.

The following attributes can be used to customize the component:

A subject observable that will emit a page of items to display in the component. When all pages have been loaded, the .complete() function should be called on the observable to prevent the component from trying to load any additional items. If you want to reset the list simply create a new subject instance and the list will remove all current items and request the first page of data. If true the next page of data will be requested when the scrollbar nears the end of the list. If false a "Load More" button will be displayed at the end of the list allowing the user to request additional items by clicking it. The height of the cells must be specified to allow scrolling to be optimized. Each cell must have the same height. This attribute is mandatory and an error will appear if this value is not defined.

This will be called whenever a new page of data is requested. This should be used to provide the component with the next page of data via the subject observable.

The following code can be used to create the example above: