@if (isLoading) { } @if (!isLoading) { }

Id	Name	Email	Department
{{ employee.id }}	{{ employee.name }}	{{ employee.email }}	{{ employee.department }}
Loading...

The uxVirtualFor directive is an alternative way of implementing virtual scrolling. It differs from the Virtual Scroll component as it does not provide a built in support for a load more button or loading additional items on scroll. It is instead intended to be a drop-in replacement for the ngFor directive which allows it to be used in places where the Virtual Scroll component is not suitable, for example, within tables.

The parent element should also be given the uxVirtualForContainer directive.

The following attributes can be used on the uxVirtualForContainer directive:

Define the height of the virtual items (in pixels). If this is not specified, the height of the first item will be used.

The uxVirtualFor directive provides the same context properties available to ngFor:

The position of the current item within the list. Indicates whether the item is first in the list. Indicates whether the item is last in the list. Indicates whether the item is in an even position within the list. Indicates whether the item is in an odd position within the list. The number of items in the list.

Context properties can be accessed by assigning them to variables within the template:

The directive also works seamlessly with observables by using the async pipe, as you would with ngFor:

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