Ng2VirtualScroll

Ng2VirtualScroll is a virtual scroll library with supporting row expansion.

Can be used with mat-table.

#Usage example ADD MODULE TO IMPORTS

1import {Ng2VirtualScrollModule} from "ng2-virtual-scroll";
2
3@NgModule({
4  declarations: [
5  ],
6  imports: [
7    Ng2VirtualScrollModule
8  ],
9  bootstrap: []
10})
11export class AppModule { }

HTML

1<ng2-virtual-scroll
2  #virtualScroll
3  [totalRows]="100000"
4  [renderRows]="10"
5  [rowHeight]="88"
6  (renderer)="handleScrollChanges($event)"
7>
8  <div *ngFor="let itemIndex of indexesArr; let i = index;">
9    <div [style.height.px]="88 + (expandedElementHeight && expandedElementIndex === itemIndex ? expandedElementHeight : 0)">
10      <div
11        (click)="rowClicked($event, itemIndex)">
12        {{items.all[itemIndex]}}
13      </div>
14      <div *ngIf="expandedElementHeight && expandedElementIndex === itemIndex" [style.height.px]="expandedElementHeight" [style.background-color]="'orange'">
15      </div>
16    </div>
17  </div>
18</ng2-virtual-scroll>

TS

1import {Component, ElementRef, ViewChild} from '@angular/core';
2import {Ng2VirtualScrollComponent} from "ng2-virtual-scroll";
3
4
5@Component({
6  selector: 'app-home-page',
7  templateUrl: './home-page.component.html',
8  styleUrl: './home-page.component.scss'
9})
10export class HomePageComponent {
11  @ViewChild('virtualScroll', {static: false}) virtualScroll?: Ng2VirtualScrollComponent;
12  items = {
13    all: Array.from(Array(100000).keys())
14  };
15  indexesArr: number[] = [];
16  handleScrollChanges(indexes: number[]) {
17      this.indexesArr = [...indexes];
18  }
19
20  rowClicked = ($event: Event, index: number, height: number = 1000) => {
21    this.virtualScroll?.rowClicked(index, height);
22  }
23
24  get expandedElementHeight(): number {
25    return this.virtualScroll?.expansion.height || 0;
26  }
27
28  get expandedElementIndex(): number | undefined {
29    return this.virtualScroll?.expansion.element?.index;
30  }
31}

#Custom styles To change height of view port overwrite styles of".virtual-scroll-wrapped".

Custom Styles Example:

1.virtual-scroll-wrapped {
2  height: 500px
3}

#Bugs report, contact and support email: igor.gaiduk.dev@gmail.com

#Bugs fixes history: November 29, 2023 - Fixed scroll using scroll bar when one of the last 10 rows expanded.