ng2-virtual-scroll

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: [e-mail]

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