Virtual Scrolling and Drag and Drop

Go back to Tutorial

Virtual Scrolling and Drag and Drop support are now available with Angular 7. Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, where Drag and Drop feature supports dragging, dropping and rearranging elements.

Virtual Scrolling

Virtual Scrolling loads and unloads elements from the DOM based on the visible parts of a list, making it possible to build very fast experiences for users with very large scrollable lists. To implement Virtual Scrolling, we need to install the angular CDK package and import the ScrollingModule module. Install the module via npm:

npm install @angular/cdk@latest

Once the module is installed, run ng serve command to check the application is running properly or not. Next, import the ScrollingModule module. To do that, open app.module.ts and make the highlighted code changes.

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

import { NgModule } from ‘@angular/core’;

import { ScrollingModule } from ‘@angular/cdk/scrolling’;

import { AppComponent } from ‘./app.component’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

ScrollingModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Add the following HTML in app.component.html file.

<h2>Virtual Scrolling example</h2>

<cdk-virtual-scroll-viewport class=”example-viewport”  itemSize=”100″>

<div *cdkVirtualFor=”let n of scrollItems”  class=”example-item”>Item {{n}}</div>

</cdk-virtual-scroll-viewport>

 

Next, we need to generate an Array to display items in the list. The following code in app.component.ts will create a number array and adds the item to the array.

export class AppComponent {

title = ‘Angular 7 – Virtual Scrolling and Drag and Drop features’;

scrollItems: number[] = [];

constructor() {

for (let index = 0; index < 10000; index++) {

this.scrollItems.push(index);

}

}

}

Add some styling to the elements.

.example-viewport {

height: 400px;

width: 300px;

border: 1px solid black;

}

.example-item {

padding: 25px;

background: rgb(171, 235, 52);

margin-bottom: 2px;

text-align: center;

font-size: 20px;

}

The app initially displays only a small subset of the items in the viewport and keep changing the items as you scroll. It keeps the number of DOM elements constant which results in better performance.

Drag and Drop

To use Drag and Drop feature, import the DragDropModule module. To do that , open app.module.ts and make the highlighted code changes.

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

import { NgModule } from ‘@angular/core’;

import { ScrollingModule } from ‘@angular/cdk/scrolling’;

import { DragDropModule } from ‘@angular/cdk/drag-drop’;

import { AppComponent } from ‘./app.component’;

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

ScrollingModule,

DragDropModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Add the following HTML in app.component.html file.

<h2>Drag and Drop example</h2>

<div class=”box” cdkDrag>Drag me around!</div>

<br />

<div cdkDropList (cdkDropListDropped)=”onDrop($event)”>

<div class=”box” *ngFor=”let item of items” cdkDrag>{{item}}</div>

</div>

Few points worth mentioning here:

• You can create draggable component by using the cdkDrag directive.
• You can add cdkDropList elements to constrain where elements may be dropped.
• Adding cdkDropList around a set of cdkDrag elements groups the draggables into a reorderable collection. Items will automatically rearrange as an element moves. Note that this will not update your data model; you can listen to the cdkDropListDropped event to update the data model once the user finishes dragging.

Next, add these following CSS class in the style.css file. These classes styles the elements and provides animation while dragging and dropping.

.box {

border: 1px solid black;

padding: 20px;

width: 200px;

background-color:lightblue;

}

.cdk-drop-dragging .cdk-drag {

transition: transform 500ms cubic-bezier(0, 0, 0.2, 1);

}

.cdk-drag-animating {

transition: transform 550ms cubic-bezier(0, 0, 0.2, 1);

}

.cdk-drag-placeholder {

background-color: Highlight;

}

Finally, open app.component.ts and place the highlighted code.

import { Component } from ‘@angular/core’;

import { CdkDragDrop, moveItemInArray } from ‘@angular/cdk/drag-drop’;

@Component({

selector: ‘app-home’,

templateUrl: ‘./home.component.html’,

})

export class HomeComponent {

items = [‘First’, ‘Second’, ‘Third’, ‘Fourth’];

onDrop(event: CdkDragDrop<string[]>) {

moveItemInArray(this.items, event.previousIndex, event.currentIndex);

}

}

As you can see in the code snippet above, the drag and drop CDK comes with a function moveItemInArray. This function rearranges the items array according to the indexes. The onDrop event is called, when the item is dropped.

Go back to Tutorial