ag-virtual-scroll

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