# ag-virtual-scroll (from Angular v13 to v22+)

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](https://ericferreira1992.github.io/ag-virtual-scroll)).

```html
<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>
```
![](https://raw.githubusercontent.com/ericferreira1992/ag-virtual-scroll/refs/heads/master/demo.gif)

## ⚠️ 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
```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
----                    	| ----          | ----
`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      	                        
----------------------------- | ----------------------------
v22   			                  | v1.22.x
v21   			                  | v1.21.x
v20   			                  | v1.20.x
v18   			                  | v1.9.x
v17   			                  | v1.8.x
v15   			                  | v1.6.x
v14   			                  | v1.5.x
v13   			                  | v1.4.x