Angular Component of virtual-scroll. It easy to use and works light and clean. He also work with differents items height.
Angular Component of virtual-scroll. It easy to use and works light and clean.
He also work with differents items height.
``html`
@for (item of vs.items; track item) {
{{item.id}}
{{item.name}}
{{item.price | currency}}
}
~~ 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) { ...you structure of content... }.
- 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-scrollImport into Module
typescript
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
---- | ---- | ----
| 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