Angular 7

Angular 7 Virtual Scrolling - ScrollingModule | Drag & Drop

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/[email protected]

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;
  }


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^