Virtual Scrolling and Drag and Drop in Angular 7 (Angular Latest Version)

In this tutorial, we are going to learn two new features of Angular 7( angular latest version ). The one is Virtual Scrolling and the second one is Drag and Drop. These are two main features of Angular CDK and now available for Angular 7. So, first-of-all, we will discuss Virtual Scrolling with simple example and then we will discuss about Drag and Drop feature with simple example.

Virtual Scrolling: In Angular 7, virtual scrolling loads and unloads element from DOM on the visibility of the data such as images or large lists.

DragDropModule: Angular 7 supports Drag and Drop feature. Now, user can drag and drop items to reorder or transfer items between lists.

Previous Tutorials

• How to upgrade angular 6 app to angular 7 in visual studio code
• How to create angular 7 and asp net core app in visual studio 2017

Angular 7 (angular latest version ) virtual scrolling and DragDropModule

Let’s understand angular 7 (angular latest version) virtual scrolling and DragDropModule in step by step.

Imp: – Before going to start Angular 7 project, we need to update latest version of Angular CLI. To do this, just open command terminal and then run this below command.

=> npm install -g @angular/cli

After running this command, you will see the Angular CLI version will be updated to greater than  7 as you see in the below screenshot.

So,  let’s start to create a new project using angular latest version (Angular 7).

Step # 1 – Create Angular 7 project using vs code

Now, in this step, we will create a new Angular 7 (angular latest version) project using visual studio code.So, open visual studio => then go to specific directory where you want to create new project => then run this below command to create a new project.

=> ng new angular7FeaturesProject

Once you run this command, Angular CLI will ask you “would you like to Add Angular routing?” and after that it will ask you “which stylesheet format would you like to use?” as you see in the below.(this is new feature of angular latest version)

Then after sometime, you will see your angular 7 app will be ready to build and run as you see in the below.

So, now run this below command and see angular 7 app is working.

=> ng serve

Now, open your browser and enter the URL like this “http://localhost:4200”

So, first we start with virtual scrolling.

Angular 7 Virtual Scrolling

In angular 7, virtual scrolling loads and unloads element from DOM on the visibility of the data such as images or large lists. It will help to build very fast experiences for the user in a very large scrollable data list. Let’s see with example.

First-of-all, we need to install angular CDK package. So, run this below command.

=> npm install @angular/cdk@latest

After installing this module, now we need to import scrolling module in app.module.ts. To do this, just open app.module.ts file, and then import scrolling module as you see in the below code file’s line # 5 and line # 15

Now, add some html code. So, open app.component.html and then write the code as you see in the below code file.

Now, add some code for typescript. So, open app.component.ts file and then write the code as you see in the below file.

Now, add some code for styles. So, open app.component.css file and then write the code as you see in the below file.

Then after running the project you will see the out as you see in the below screenshot.

Now, as you see the scrolling Module will only show the small part of the list, and keep changing the list as you scrolling

Angular 7 Drag and Drop.

Angular 7 supports Drag and Drop feature. Now, user can drag and drop items to reorder or transfer items between lists. Let’s see with simple example.

Now, open app.module.ts file and then import the module as you see in the below file line # 6 and line # 16.

Now, open app.component.html and then write the code as you see in the below file code.

Let’s understand the above code.

Line # 2: cdkDrag is used to create draggable component.

Line # 4:  we can add cdkDropList element to constrain where elements may be dropped.

=>adding cdkDropList around a set of cdkDrag elements groups the draggable into a reorderable collection. Items will automatically rearrange as an element moves. This will not update the data modal.

Now, add some style sheet code. So, open app.component.css file and then write the code as you see in the below file.

Now, add some code for app.component.ts file. So write the code as you see in the below file code.

Now, run your application and then you will see the output as you see in the below screenshot.

Thank you for reading. Keep visiting and sharing!