@for (employee of loadedEmployees; track employee) {
  1. {{ employee.name }} ({{ employee.department }})
    {{ employee.email }}
    {{ employee.id }}
    2. }
Loading...
loadOnScroll

When displaying long lists of data it is often preferable to add paging to the list. By using paging, data is loaded in small blocks improving load times and reducing the workload on the server providing the data.

The uxInfiniteScroll directive can be used to manage paging for a scrollable list of data. Paging can be triggered via a scroll threshold, giving the "infinite scroll" effect, or via user input. Additionally, the optional uxInfiniteScrollLoading and uxInfiniteScrollLoadButton directives are provided to display a loading indicator and a "Load More" button as required.

Infinite Scroll

The uxInfiniteScroll directive has the following configuration properties:

The callback function which returns a page of data. The return value should be either a promise which resolves to an array, or a plain array in case the data can be loaded synchronously. An empty array or an array with fewer than pageSize items can be returned, which indicates that the end of the data set has been reached. The collection of items to display in the list. This will be populated by the directive, using the loading function provided, so it should be used in a read-only manner. It is ideally used as the source of a repeater such as ngFor. The filter which is passed into the loading function. It is up to the loading function to interpret this and return data which matches the filter according to the application specification. The number of items to request in a page. This should ideally be more than twice the number of items which fit into the height of the scrolling view, but this is not required. Controls whether additional data is loaded based on the scroll position. If set to true the the list will have the "infinite scroll" effect. The scrollable element which contains the data, if this is different from the element where the uxInfiniteScroll directive is defined. To bind to the window scroll the scrollElement should be set to document.documentElement. Emits when collection has changed. Raised when a page of data is about to be requested from the loading function. Call preventDefault() on the event to cancel the load. Raised when a page of data has been received and resolved from the loading function. Raised when a promise from the loading function results in an error.

Additionally, the following functions can be called on the directive for custom behavior.

Loads the next page of data. Clear the collection. Future requests will load from page 0. Call the paging function for each loaded page and update any changed data. The current page and scroll position will be retained. Call the paging function for the specified page index, and update any changed data. The current page and scroll position will be retained.

Infinite Scroll Loading Indicator

The uxInfiniteScrollLoading structural directive can be applied to an element to mark it as the loading indicator. This will be displayed whenever the infinite scroll directive is loading data. Note that the loading indicator should be a child of the uxInfiniteScroll element for this directive to function. The loading and loaded events are also available to implement more advanced loading indicators.

See below for an example, and note the asterisk prefix to indicate use of a structural directive.

Infinite Scroll Load Button

The uxInfiniteScrollLoadButton structural directive can be applied to an element to mark it as a clickable button which will load a new page of data into the list. This will be automatically hidden when the control is loading data, or when the data set has been exhausted. Note that the load button should be a child of the uxInfiniteScroll element for this directive to function. The request function on uxInfiniteScroll can also be used to programmatically load pages of data into the list.

See below for an example, and note the asterisk prefix to indicate use of a structural directive.

Accessibility

On the list items, it is important to 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). Additionally, the example shows use of LiveAnnouncer to announce the start and end of the loading period.

Sample Code