Angular Virtual Scrolling | Module Drag Drop | 8,9,10,11,12

Virtual Scrolling has been added to CDK, loading and unloading elements from the DOM based on the visible parts of a list, and making it possible to build very fast experiences for users with very large scrollable lists.

The <cdk-virtual-scroll-viewport> displays large lists of elements performance by only rendering the items that fit on-screen.

Virtual scrolling is different from strategies like infinite scroll where it renders a set amount of elements and then when you hit the end renders the rest.

Firstly, we need to install the Angular CDK package to import the ScrollingModule module.

Install the module using  NPM - npm install @angular/cdk@latest

Table of Contents -

1.      To Install the angular CDK package

2.      To Import the ScrollingModule module

3.      Example

4.      Result

Example - Open the terminal window and execute the above command -

Import the ScrollingModule module -

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { DataTablesModule } from 'angular-datatables';

//Scrolling Module

import { ScrollingModule } from '@angular/cdk/scrolling';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    DataTablesModule,

    ScrollingModule //Scrolling Module

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Added the Scroll Items for scrolling your Items - app.component.ts

import { Component } from '@angular/core';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'Angular 7 New Features – Virtual Scrolling and Drag and Drop Example';

  scrollItems: number[] = [];

  constructor() {

    for (let index = 1; index < 99000; index++) {

      this.scrollItems.push(index);

    }

  }

}

The code for HTML DOM  - app.component.html

<h2> {{title}}</h2>

<h4>Virtual Scrolling Example -</h4>

<cdk-virtual-scroll-viewport class="viewport-section"  itemSize="100">

   <div class="item-section" *cdkVirtualFor="let item of scrollItems">Your Item Row{{item}}</div>

</cdk-virtual-scroll-viewport>

And CSS  - app.component.css

.viewport-section {

    height: 200px;

    width: 90%;

    border: 1px solid rgb(169,169,169)

  }

  

  .item-section {

    padding: 15px;

    background: rgb(192,192,192);

    margin-bottom: 1px;

    text-align: center;

    font-size: 15px;

  }

Result go to link - https://www.useloom.com/share/4fa3625b39d040308ae31d1a2bb9065b