IgxForOfDirective specification

Overview

Many modern applications require displaying big data with high performance in a way that is seamless to the end user. For such scenarios, it is imperative to have a virtual rendering mechanism in place that allows the user to scroll through a large set of data smoothly with optimal performance.

The idea is to provide smooth rendering and scrolling experience by reducing the number of DOM objects in-memory.

Objectives

Provide a directive, which creates a scrollable container and render only small chunks of the data. The directive usage should be similar to the usage of the structural directive *ngFor. The directive should be able to virtualize the igx-grid and igx-list. In addition, it should be usable for any custom template. Should be pluggable for both vertical and horizontal virtualization.

User stories

Developer

As developer, I want:

to be able to use the igx-virtual-directive to render any set of components vertically, so that I can have smooth scrolling and rendering experience.
to be able to use the igx-virtual-directive to render any set of components horizontally, so that I can have smooth scrolling and rendering experience.
to be able to nest the igx-virtual-directive to have virtualization in both horizontal and vertical direction for any set of components, so that I can have smooth scrolling and rendering experience.
to use igx-virtual-directive into igx-grid so that the grid remain usable with huge amount of the records and columns.
to be able to use igx-virtual-directive into igx-list so that the grid remain usable with huge amount of the records and columns.

End user

As an end user, I want:

to be able to scroll up and down with the arrows any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
to be able to scroll with the mouse wheel any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
to be able to drag the thumb of any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.
to be able to scroll on touch devices any component that uses igx-virtual-directive, so that I can would be able to see all of the rows.

API

Options

Properties:

igxForOf - the data to be virtualized (Type: any[])
igxForScrollOrientation - specify the virtualization direction - "horizontal" or "vertical" it can be (Type: string)
igxForScrollContainer - specify the container where the helper scrollbars will be contained, it is useful when nesting the directive (Type: any)
igxForContainerSize - specifies the container size (Type: any)
igxForItemSize - specifies the item size, when the virtualization is vertical it is used as height (Type: any)