ag-virtual-scroll (from Angular v13 to v20+)

Angular Component of virtual-scroll. It easy to use and works light and clean. He also work with differents items height.

Use example (more examples).

<ag-virtual-scroll #vs [items]="items" height="350px" [min-row-height]="50" class="box-border">
  @for (item of vs.items; track item) {
    <div class="demo-item" *ngFor="let item of vs.items">
      <div>
        <span>{{item.id}}</span>
      </div>
      <div>
        <strong>{{item.name}}</strong><br/>
        {{item.price | currency}}
      </div>
    </div>
  }
</ag-virtual-scroll>

⚠️ Important ⚠️

• The version 1.20.x of this lib is using standalone components, so ~~AgVirtualScrollModule~~ no longer exists.
• Always wrap the repeat element with some tag (ie.: div) or ag-vs-item, per example: @for (item of vs.items; track item) { <div>...you structure of content...</div> }.
• Define a min-row-height to increase virtualization performance.
• Always define a height because it will be the one that will do the virtualization of the items.
• Inform your all data list in [items].
• Add #vs to use in iteration @for.

Usage

Install

npm install ag-virtual-scroll

Import into Module

import { AgVirtualScrollComponent, AgVsItemComponent } from 'ag-virtual-scroll';

@NgModule({
  imports: [
    ...,
    AgVirtualScrollComponent,
    AgVsItemComponent, // Optional
  ],
  declarations: [...],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

API

Inputs/Outputs (Required)

Name | Type | Description ---- | ---- | ---- items | any[] | Your all data list stay here.

Inputs/Outputs (Optional)

Name | Type | Default | Description ---- | ---- | ---- | ---- min-row-height | number | 40 | This determine how minimm height each item will have. height | string | 'auto' | Define a fixed height for container to make a virtual-scroll of items. onItemsRender | EventEmitter<AgVsRenderEvent<T>> | none | Define a max width to container.

Angular version compatibility

Angular version | AgVirtualScroll version ----------------------------- | ---------------------------- v20 | v1.20.x v18 | v1.9.x v17 | v1.8.x v15 | v1.6.x v14 | v1.5.x v13 | v1.4.x