Drag and Drop Using Angular 7

Drag and Drop Using Angular 7

Drag and drop is one of the new features which is provided by Angular 7. Angular 7 makes it very easy to implement this feature. So here, in this blog, we are going to learn how to drag and drop the items from a list of numbers using a basic example.

Drag and drop is one of the new features which is provided by Angular 7. Angular 7 makes it very easy to implement this feature. So here, in this blog, we are going to learn how to drag and drop the items from a list of numbers using a basic example.

In this post, we learn how to use Angular to create a mobile app that has a drag and drop feature.

Drag and drop is one of the new features which is provided by Angular 7. Angular 7 makes it very easy to implement this feature. So here, in this blog, we are going to learn how to drag and drop the items from a list of numbers using a basic example.

Before getting started with the implementation there are some basic pre-requisites which are necessary. If you are still using Angular CLI 6, then you have to upgrade your Angular CLI version to Angular CLI 7.

You can check the version of Angular CLI you are using in your system with just one command given below:

Now one more the basic necessities for implementing Drag and Drop is to install Angular CDK Animation. You can install this using the command given below:

So now we are all set to start with the implementation as we already installed all the dependencies.

  1. Firstly, we need to import the drag and drop module in app.module.ts.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DragDropModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  1. Now switch to its component file, i.e app.component.ts, where we write the business logic. Here, first add numbers (items) in an array like shown below:
import { Component } from '@angular/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Drag-Drop Tutorials';
  allNumbers: number[] = [];
  constructor() {
    for (let insertNumbers = 0; insertNumbers <= 100; insertNumbers++) {
      this.allNumbers.push(insertNumbers);
    }
  }
}

In the above code, we declare an array name, allNumbers,** in which we push or insert the numbers in an array from **0 to 100.

  1. To display a list of all the numbers on the user interface we need to write the HTML code for that in the the *app.component.html *file.

In this HTML file, we include cdkDroplist and everything here will go under cdkDropList. Also, another thing we add here is cdkDrag, which helps in dragging the elements to change their place. And for making some attractive aesthetics we write some CSS in the app.component.css file.

.display-list-of-numbers {
  height: 100px;
  width: 100%;
  border: 3px solid dodgerblue;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

  1. So now we need a cdkDropList method with the prefix** **dropped, which adds drop event to the method. This ensures the proper drag and drop mechanism occurs between the list of elements.

  1. You can see in the above code there is one method, drop($event), which is responsible for dropping an item. To define the drop method we need to write the definition of this method in its TS file.
drop(event: CdkDragDrop<number[]>) {
  moveItemInArray(this.allNumbers, event.previousIndex, event.currentIndex);
}

In this code, we define a method name, drop,** **and pass a drop event via the CdkDragDrop event provided by Angular CDK and pass in array of numbers.

  1. Moving further we call a built-in method inside the drop method, i.e moveItemInArray, which is a part of the CDK and we are going to pass their three things here:
  • number array
  • previous index
  • current index

And, these three things are enough to move the index of an item as you can see in the result below.

Now you can see that the number* 0* is shifted or dragged in place of 2 and its position is changed as compared with the previous image.

*Conclusion *

After following this post, I hope you will be able to drag and drop any element from the list of numbers using Angular 7 with just following a few simple steps.

angular

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

Angular Sass: How To Use Sass In Angular 9 Tutorial

Sass in Angular is an extension of CSS that allows you to use things like variables, nested rules, inline imports. Angular supports Sass, CSS, and Less.

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica