python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions