Class IgxForOfDirective<T>

Type parameters

  • T

Hierarchy

Implements

  • OnInit
  • OnChanges
  • DoCheck
  • OnDestroy
  • AfterViewInit

Constructors

constructor

  • new IgxForOfDirective(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers, resolver: ComponentFactoryResolver, cdr: ChangeDetectorRef, _zone: NgZone, syncScrollService: IgxForOfScrollSyncService): IgxForOfDirective

Properties

cdr

cdr: ChangeDetectorRef

igxForContainerSize

igxForContainerSize: any

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>

igxForItemSize

igxForItemSize: any

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>

igxForOf

igxForOf: any[]

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

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

igxForScrollContainer

igxForScrollContainer: any

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>

igxForScrollOrientation

igxForScrollOrientation: string = "vertical"

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>

igxForSizePropName

igxForSizePropName: any

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

onBeforeViewDestroyed

onBeforeViewDestroyed: EventEmitter<EmbeddedViewRef<any>> = new EventEmitter<EmbeddedViewRef<any>>()

onChunkLoad

onChunkLoad: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

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

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (onChunkLoad)="chunkLoad($event)"></ng-template>
chunkLoad(e){
alert("chunk loaded!");
}

onChunkPreload

onChunkPreload: EventEmitter<IForOfState> = new EventEmitter<IForOfState>()

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'" (onChunkPreload)="chunkPreload($event)"></ng-template>
chunkPreload(e){
alert("chunk is loading!");
}

onContentSizeChange

onContentSizeChange: EventEmitter<any> = new EventEmitter<any>()

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

onDataChanged

onDataChanged: EventEmitter<any> = new EventEmitter<any>()

An event that is emitted after data has been changed.

<ng-template igxFor [igxForOf]="data" [igxForScrollOrientation]="'horizontal'" (onDataChanged)="dataChanged($event)"></ng-template>
dataChanged(e){
alert("data changed!");
}

totalItemCount

totalItemCount: number = null

The total count of the virtual data items, when using remote service.

this.parentVirtDir.totalItemCount = data.Count;

Accessors

displayContainer

  • get displayContainer(): HTMLElement | undefined

igxForTrackBy

  • get igxForTrackBy(): TrackByFunction<T>
  • set igxForTrackBy(fn: TrackByFunction<T>): void
  • Gets the function used to track changes in the items collection. By default the object references are compared. However this can be optimized if you have unique identifier value that can be used for the comparison instead of the object ref or if you have some other property values in the item object that should be tracked for changes. This option is similar to ngForTrackBy.

    const trackFunc = this.parentVirtDir.igxForTrackBy;

    Returns TrackByFunction<T>

  • Sets the function used to track changes in the items collection. This function can be set in scenarios where you want to optimize or customize the tracking of changes for the items in the collection. The igxForTrackBy function takes the index and the current item as arguments and needs to return the unique identifier for this item.

    this.parentVirtDir.igxForTrackBy = (index, item) => {
         return item.id + item.width;
    };

    Parameters

    • fn: TrackByFunction<T>

    Returns void

scrollPosition

  • get scrollPosition(): number
  • set scrollPosition(val: number): void

virtualHelper

  • get virtualHelper(): any

Methods

addScrollTop

  • addScrollTop(addTop: number): boolean
  • Shifts the scroll thumb position.

    this.parentVirtDir.addScrollTop(5);

    Parameters

    • addTop: number

      negative value to scroll up and positive to scroll down;

    Returns boolean

getItemCountInView

  • getItemCountInView(): number

getScroll

  • getScroll(): any
  • Returns a reference to the scrollbar DOM element. This is either a vertical or horizontal scrollbar depending on the specified igxForScrollOrientation.

    dir.getScroll();

    Returns any

getScrollForIndex

  • getScrollForIndex(index: number, bottom?: boolean): number
  • Returns the scroll offset of the element at the specified index.

    this.parentVirtDir.getScrollForIndex(1);

    Parameters

    • index: number
    • Optional bottom: boolean

    Returns number

getSizeAt

  • getSizeAt(index: number): number

isScrollable

  • isScrollable(): boolean

ngAfterViewInit

  • ngAfterViewInit(): void

scrollNext

  • scrollNext(): void
  • Scrolls by one item into the appropriate next direction. For "horizontal" orientation that will be the right column and for "vertical" that is the lower row.

    this.parentVirtDir.scrollNext();

    Returns void

scrollNextPage

  • scrollNextPage(): void
  • Scrolls by one page into the appropriate next direction. For "horizontal" orientation that will be one view to the right and for "vertical" that is one view to the bottom.

    this.parentVirtDir.scrollNextPage();

    Returns void

scrollPrev

  • scrollPrev(): void
  • Scrolls by one item into the appropriate previous direction. For "horizontal" orientation that will be the left column and for "vertical" that is the upper row.

    this.parentVirtDir.scrollPrev();

    Returns void

scrollPrevPage

  • scrollPrevPage(): void
  • Scrolls by one page into the appropriate previous direction. For "horizontal" orientation that will be one view to the left and for "vertical" that is one view to the top.

    this.parentVirtDir.scrollPrevPage();

    Returns void

scrollTo

  • scrollTo(index: any): void

verticalScrollHandler

  • verticalScrollHandler(event: any): void

Object literals

state

state: 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;

chunkSize

chunkSize: number = 0

startIndex

startIndex: number = 0