Interactive Lists with Angular — Drag and Drop

In version 7 of the Angular it is possible to use a very interesting aspect for purposes of interaction, drag and drop.
In this article, I show you how to use this feature, applied to a list of characters in a game.

Requirements

Created the project, you must include the following dependencies. In a terminal do:

$ ng add @angular/material

Accept the hammerjs library installation and choose a theme.
With this, we can open the main module and define the DragDropModule module in the import array.
For this example, I’m going to use the HttpClientModule to load the data from a local file.

// Outros imports omitidos
'@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   AppRoutingModule,
   BrowserAnimationsModule,
   HttpClientModule,
   DragDropModule

 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

In the assets folder let’s create a data.json file with the following content:

[
 {
 “name”: “Scorpion”,
 “image”: “https://i.pinimg.com/564x/c4/b2/65/c4b2659a04c7cb1f99c1b2ed738f73d2.jpg",
 “fatality”: “X + L2 + UP”
 },
 {
 “name”: “Subzero”,
 “image”: “https://i.pinimg.com/564x/80/b5/45/80b5458dd048c3457ca54a903de3f7ba.jpg",
 “fatality”: “Up + Down + Up + Kick medium”
 },
 {
 “name”: “Kitana”,
 “image”: “https://i.pinimg.com/originals/4f/cc/cd/4fcccdf78814311d77be47d233db1699.png",
 “fatality”: “X + L2 + UP”
 },
 {
 “name”: “Aang”,
 “image”: “http://rehatron-alpha.eu/images/6321365424_essay-help-forum.png",
 “fatality”: “ L2 + UP”
 }
]

This way, we have an array of objects with properties that represent our characters.

Component Logic

Edit the class app.component.ts, let’s define an interface to map the character with the name, image and fatality fields.

export interface Character {
 name: string;
 image: string;
 fatality: string;
}

After signing the class we will define two arrays that will represent our lists.
In the constructor method, we do the HttpClient injection and call the getMyList () method.
The implementation is basically a get, typing the result into our <Character []> interface, informing the data source path “assets / data.json”.
We hear the issuing of events in subscribe, passing the list to mylist.

The next function, drop is responsible for two actions.
Change the order of the elements by using the movieItemInArray function and / or, change the item, in the case of the characters, to another list. For this, we use the transferArrayItem function.
The implementation should check before, what is the source (container) of the item, through the command:

if (event.previousContainer === event.container) {

Here is the complete code for the class:

Component Template

Let’s code the template. Edit the app.component.html and leave it like this:

Lines 8 and 17 are where we define the container, using the cdkDropList directive. Still on line 8 we create a #minha attribute and assign the directive. With this we can point to which list we can drag the characters by using the [cdkDropListConnectedTo] attribute.

We define the data source with [cdkDropListData] and finally the function
(cdkDropListDropped) = “drop ($ event)”, responsible for previously defined actions.

In line 14, we perform the iteration of the list with * ngFor. Important here we also declare the cdkDrag directive, indicating the element that can be dragged.

Note that from line 17, we encode the other list by changing the name and the source.

In the style file, we put two animations to change the order and to release the character.

.cdk-drop-list-dragging .cdk-drag {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-animating {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}
.img-person {
border-radius: 35%;
width: 80px;
}

Very easy, no?
Code source of the project in GitHub.
Bye-bye.