ag-virtual-scroll
TypeScript icon, indicating that this package has built-in type declarations

1.7.0 • Public • Published

ag-virtual-scroll (Angular 17+)

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">
    <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⚠️

  • Always wrap the repeat element with a div or ag-vs-item, per example: <div *ngFor="let item of vs.items">...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 *ngFor.

Usage

Install

npm install ag-virtual-scroll

Import into Module

import { AgVirtualScrollModule } from 'ag-virtual-scroll';

@NgModule({
  imports: [
    ...,
    AgVirtualScrollModule
  ],
  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.

Readme

Keywords

none

Package Sidebar

Install

npm i ag-virtual-scroll

Weekly Downloads

736

Version

1.7.0

License

none

Unpacked Size

242 kB

Total Files

22

Last publish

Collaborators

  • ericferreira1992