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.
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.
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 { }
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.
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;
}
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.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.
moveItemInArray
, which is a part of the CDK and we are going to pass their three things here: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.
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