An event that is emitted after a new chunk has been loaded.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkLoad)="loadChunk($event)"></ng-template>

loadChunk(e){
alert("chunk loaded!");
}

An event that is emitted on chunk loading to emit the current state information - startIndex, endIndex, totalCount. Can be used for implementing remote load on demand for the igxFor data.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (chunkPreload)="chunkPreload($event)"></ng-template>

chunkPreload(e){
alert("chunk is loading!");
}

An event that is emitted after the rendered content size of the igxForOf has been changed.

An event that is emitted after data has been changed.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (dataChanged)="dataChanged($event)"></ng-template>

dataChanged(e){
alert("data changed!");
}

An @Input property that sets the px-affixed size of the container along the axis of scrolling. For "horizontal" orientation this value is the width of the container and for "vertical" is the height.

<ng-template igxFor let-item [igxForOf]="data" [igxForContainerSize]="'500px'"
     [igxForScrollOrientation]="'horizontal'">
</ng-template>

An @Input property that sets the px-affixed size of the item along the axis of scrolling. For "horizontal" orientation this value is the width of the column and for "vertical" is the height or the row.

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" [igxForItemSize]="'50px'"></ng-template>

An @Input property that sets the data to be rendered.

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>

Optionally pass the parent igxFor instance to create a virtual template scrolling both horizontally and vertically.

<ng-template #scrollContainer igxFor let-rowData [igxForOf]="data"
      [igxForScrollOrientation]="'vertical'"
      [igxForContainerSize]="'500px'"
      [igxForItemSize]="'50px'"
      let-rowIndex="index">
      <div [style.display]="'flex'" [style.height]="'50px'">
          <ng-template #childContainer igxFor let-item [igxForOf]="data"
              [igxForScrollOrientation]="'horizontal'"
              [igxForScrollContainer]="parentVirtDir"
              [igxForContainerSize]="'500px'">
                  <div [style.min-width]="'50px'">{{rowIndex}} : {{item.text}}</div>
          </ng-template>
      </div>
</ng-template>

An @Input property that specifies the scroll orientation. Scroll orientation can be "vertical" or "horizontal".

<ng-template igxFor let-item [igxForOf]="data" [igxForScrollOrientation]="'horizontal'"></ng-template>

An @Input property that sets the property name from which to read the size in the data object.

The current state of the directive. It contains startIndex and chunkSize. state.startIndex - The index of the item at which the current visible chunk begins. state.chunkSize - The number of items the current visible chunk holds. These options can be used when implementing remote virtualization as they provide the necessary state information.

const gridState = this.parentVirtDir.state;