Angular Virtual Scroll with Dynamic Variable Height & Width

Implementing a virtual scroll with dynamic height in Angular can greatly improve the performance of your application, especially when dealing with large datasets. Here’s a general approach you can take

1. Using cdk-virtual-scroll-viewport

1. Install Angular CDK: If you haven’t already, install Angular CDK in your project. You can do this via npm:
npm install @angular/cdk

2. Import the Virtual Scrolling Module: Import ScrollingModule from
@angular/cdk/scrolling into your Angular module

import { ScrollingModule } from '@angular/cdk/scrolling';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; 
@NgModule({
imports: [BrowserModule, ScrollingModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}

3. Define Component Template: Use the cdk-virtual-scroll-viewport to create the template where you want to implement virtual scrolling and define the template for each item.

    
        

            
{{ item.name }}
        
    

4. Implement Virtual Scrolling Logic: Bind the data source and define the height and width of your items dynamically.

import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  items: any[] = [];
  viewportSizeHeight = 500;
  itemsArray = Array(10)
    .fill(0)
    .forEach((_, i) =>
      this.items.push({
        id: i + 1,
        name: `Item ${i + 1}`,
      })
    );
   calculateViewportSize() {
    const container = document.getElementById('container');
    if (container) {
      this.viewportSizeHeight = container.clientHeight;
    }
  }
  calculateitemSize(item: any) {
    return Number(item.id) * 50;
  }
}

5. Style Your Component: Add styles for the items and the viewport as needed.

cdk-virtual-scroll-viewport {
  border: 1px solid black;
  border-radius: 4px;
  width: 300px;
}
.item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid black;
} 

6. The height of each item and the height of the viewport (viewportSize) can be set dynamically. The resize event is used to recalculate the viewport size whenever the container size changes.

2. Using ag-virtual-scroll

1. Install ag-virtual-scroll: If you haven’t already, install ag-virtual-scroll in your project. You can do this via npm:
npm i ag-virtual-scroll

2. Import the Virtual Scrolling Module: Import AgVirtualScrollModule from ag-virtual-scroll into your Angular module.

import { AgVirtualScrollModule } from 'ag-virtual-scroll';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component'; 
@NgModule({
  imports: [BrowserModule, AgVirtualScrollModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Define Component Template: Use the ag-virtual-scroll to create the template where you want to implement virtual scrolling and define the template for each item.

    
        

            
 {{item.name}} 
        
    

4. Implement Virtual Scrolling Logic: Bind the data source and define the height and width of your items dynamically.

import { Component } from '@angular/core'; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  items: any[] = [];
  viewportSizeHeight = 500;
  itemsArray = Array(10)
    .fill(0)
    .forEach((_, i) =>
      this.items.push({
        id: i + 1,
        name: `Item ${i + 1}`,
      })
    ); 
  calculateViewportSize() {
    const container = document.getElementById('container');
    if (container) {
      this.viewportSizeHeight = container.clientHeight;
    }
  } 
  calculateitemSize(item: any) {
    return Number(item.id) * 50;
  }
}

5. Style Your Component: Add styles for the items and the viewport as needed.

ag-virtual-scroll {
  border: 1px solid black;
  border-radius: 4px;
  width: 300px;
}
.item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid black;
}

6. The height of each item and the height of the viewport (viewportSize) can be set dynamically. The resize event is used to recalculate the viewport size whenever the container size changes.