• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / Virtual Scrolling and Drag and Drop in Angular 7 (Angular Latest Version)

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

December 2, 2018 by mebakar1005 Leave a Comment

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.

See also  How to Create an Angular 7 and Asp Net Core app using Visual Studio 2017

=> 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.

See also  How to Create Service in Angular 5

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!

See also  What are Components in Angular 5

How to upgrade Angular 6 App to Angular 7 in Visual Studio Code
Angular 7 CRUD with web API using Asp.Net Core

Related

Filed Under: Angular, Angular 5, Angular 6, Angular 7 Tagged With: Angular 7, Angular 7 Drag & Drop, Angular 7 Virtual Scrolling, Angular Latest Version, ANGULAR TUTORIAL

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • 4 Explicaciones por qué Ella le dio El hombro frío
  • Overland Park: más grande suburbio de Kansas City es en realidad un romántico Destino lleno de Exterior Actividades, Comida excelentes y Cultura
  • Lasting Online Dating Sites: Techniques For Survival
  • Very best Antiviruses Designed for PC Game enthusiasts
  • Very best Antivirus Software
  • Realmente Hace Él En absoluto como yo ?
Copyright © 2022