ng2-virtual-scroll
v0.1.1
Published
Virtual Scroll library with supporting row expansion.
Downloads
11
Maintainers
Readme
Ng2VirtualScroll
Ng2VirtualScroll is a virtual scroll library with supporting row expansion.
Can be used with mat-table.
#Usage example ADD MODULE TO IMPORTS
import {Ng2VirtualScrollModule} from "ng2-virtual-scroll";
@NgModule({
declarations: [
],
imports: [
Ng2VirtualScrollModule
],
bootstrap: []
})
export class AppModule { }
HTML
<ng2-virtual-scroll
#virtualScroll
[totalRows]="100000"
[renderRows]="10"
[rowHeight]="88"
(renderer)="handleScrollChanges($event)"
>
<div *ngFor="let itemIndex of indexesArr; let i = index;">
<div [style.height.px]="88 + (expandedElementHeight && expandedElementIndex === itemIndex ? expandedElementHeight : 0)">
<div
(click)="rowClicked($event, itemIndex)">
{{items.all[itemIndex]}}
</div>
<div *ngIf="expandedElementHeight && expandedElementIndex === itemIndex" [style.height.px]="expandedElementHeight" [style.background-color]="'orange'">
</div>
</div>
</div>
</ng2-virtual-scroll>
TS
import {Component, ElementRef, ViewChild} from '@angular/core';
import {Ng2VirtualScrollComponent} from "ng2-virtual-scroll";
@Component({
selector: 'app-home-page',
templateUrl: './home-page.component.html',
styleUrl: './home-page.component.scss'
})
export class HomePageComponent {
@ViewChild('virtualScroll', {static: false}) virtualScroll?: Ng2VirtualScrollComponent;
items = {
all: Array.from(Array(100000).keys())
};
indexesArr: number[] = [];
handleScrollChanges(indexes: number[]) {
this.indexesArr = [...indexes];
}
rowClicked = ($event: Event, index: number, height: number = 1000) => {
this.virtualScroll?.rowClicked(index, height);
}
get expandedElementHeight(): number {
return this.virtualScroll?.expansion.height || 0;
}
get expandedElementIndex(): number | undefined {
return this.virtualScroll?.expansion.element?.index;
}
}
#Custom styles To change height of view port overwrite styles of".virtual-scroll-wrapped".
Custom Styles Example:
.virtual-scroll-wrapped {
height: 500px
}
#Bugs report, contact and support email: [email protected]
#Bugs fixes history: November 29, 2023 - Fixed scroll using scroll bar when one of the last 10 rows expanded.