Skip to main content

RxVirtualScrollViewportComponent

The viewport container that *rxVirtualFor operates inside. It implements the RxVirtualScrollViewport interface, maintains the scroll runway height so the active scroll strategy has room to position items, and gathers and forwards scroll events to the consumer.

Why this matters: see How RxAngular virtual scrolling works.

Import​

import { RxVirtualScrollViewportComponent } from '@rx-angular/template/virtual-scrolling';

Selector​

  • rx-virtual-scroll-viewport

A scroll strategy is applied through an attribute selector on this same element: [itemSize] (fixed), [dynamic] (dynamic), or [autosize] (autosize). See Virtual scroll strategies.

Inputs​

InputTypeDefaultDescription
initialScrollIndexnumber0The first view to be visible to the user. The viewport waits for data to arrive and scrolls to the given index immediately.

The runwayItems, runwayItemsOpposite, appendOnly, and keepScrolledIndexOnPrepend inputs are declared on the scroll-strategy directives, not on the viewport. See Virtual scroll strategies.

Outputs​

OutputTypeDescription
viewRangeObservable<ListRange> where ListRange = { start: number; end: number }The range being rendered by *rxVirtualFor, determined by the active RxVirtualScrollStrategy. Updates before the renderCallback, so it is only in sync with the DOM once the next renderCallback has emitted.
scrolledIndexChangeObservable<number>The index of the currently scrolled (topmost visible) item.

Two attribute directives let you move the scrollable area off the viewport element:

DirectiveSelectorPurpose
RxVirtualScrollElementDirective[rxVirtualScrollElement]Marks an outer element as the scroll container, so you can place content before and after the viewport.
RxVirtualScrollWindowDirectiverx-virtual-scroll-viewport[scrollWindow]Uses the browser window as the scroll element (useful on mobile).

Minimal example​

import { Component } from '@angular/core';
import { FixedSizeVirtualScrollStrategy, RxVirtualScrollViewportComponent, RxVirtualFor } from '@rx-angular/template/virtual-scrolling';

@Component({
  imports: [RxVirtualFor, RxVirtualScrollViewportComponent, FixedSizeVirtualScrollStrategy],
  template: `
    <rx-virtual-scroll-viewport [itemSize]="50" [initialScrollIndex]="10" (viewRange)="range = $event" (scrolledIndexChange)="index = $event">
      <div *rxVirtualFor="let item of items$">{{ item.name }}</div>
    </rx-virtual-scroll-viewport>
  `,
})
export class ListComponent {
  items$ = inject(DataService).getItems();
  range?: { start: number; end: number };
  index = 0;
}

See also​