This library provides efficient rendering of large datasets in a list or grid layout within Angular applications. It utilizes virtual scrolling techniques to only render the visible portion of the grid, improving performance and reducing memory consumption.
- 🚀 Optimized Performance: Renders only visible grid items to minimize memory usage
- 📊 Large Dataset Support: Efficiently handles massive data collections
- 🎨 Flexible Grid Configuration: Customizable layout and styling options
- 📱 Responsive Design: Dynamically adjusts grid based on viewport size
- 🔄 Resize Handling: Auto-scroll and column count change detection
To install the NgxResponsiveVirtualScroll Library, you can use npm:
npm install ngx-responsive-virtual-scroll
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ResponsiveVirtualScrollModule } from 'ngx-responsive-virtual-scroll';
@NgModule({
imports: [BrowserModule, ResponsiveVirtualScrollModule],
// Other declarations and providers...
})
export class YourAppModule {}
<ngx-responsive-virtual-scroll
[items]="data$"
[type]="'grid'"
[itemGap]="24"
[stretchItems]="true"
[scrollViewPadding]="24"
[autoScrollOnResize]="true"
[gridMaxColumns]="4"
[gridItemWidth]="200"
[rowHeight]="200"
[trackBy]="trackByFn"
(columnCountChange)="handleChange($event)"
>
<ng-template let-item let-row="row" let-column="column">
<!-- Define your cell here -->
<!-- Access data item properties with {{item}} -->
<!-- Access row and column index of current item -->
</ng-template>
</ngx-responsive-virtual-scroll>
Property | Type | Default | Description |
---|---|---|---|
[items] |
Observable<any[]> or any[] |
- | Data source for rendering (array or stream of data) |
[type] |
'list' or 'grid' |
'grid' |
Layout type |
[itemGap] |
number |
0 |
Spacing between items |
[gridMaxColumns] |
number |
undefined |
Maximum grid columns |
[gridItemWidth] |
number |
200 |
Width of grid items |
[rowHeight] |
number |
- | Height of each row |
[stretchItems] |
boolean |
false |
Stretch items to fill space |
[autoScrollOnResize] |
boolean |
false |
Scroll to last focused item on resize |
[trackBy] |
function |
undefined |
Optimize update performance (only works for array datasource) |
Event | Type | Description |
---|---|---|
(columnCountChange) |
number |
Triggered when column count changes |