In this article, we will implement a small angular application about item sorting using the angular material drag&drop.
Key Notes About Angular Material Drag&Drop:
Now let's install angular material into our application.
Key Notes About Angular Material Drag&Drop:
Let's know about a few key things on angular material drag&drop like:
- DragDropModule load from the library '@angular/cdk/drag-drop'
- The 'cdkDrag' attribute makes an element draggable.
- The 'cdkDropList' attribute on an element that surrounds a set of 'cdkDrag' elements groups the draggable into a reorderable collection. So it creates a boundary of the region for dragging.
- The 'cdkDropListDropped' is an event fired after dipping the item.
Create An Angular Application:
To accomplish our demo let's create a sample angular application.
Command To Install Angular CLI:
npm install -g @angular/cli
npm install -g @angular/cli
Command To Create Angular App:
ng new your_app_name
ng new your_app_name
Now let's install angular material into our application.
Command To Install Angular Material:
ng add @angular/material
ng add @angular/material
Basic App Setup:
First, let's bind the sample items without implementing any drag&drop functionality.
Import 'MatBadgeModule', 'MatButtonModule' into our 'AppModule'.
src/app/app.module.ts:
// code hidden for display purpose import {MatBadgeModule} from '@angular/material/badge'; import {MatButtonModule} from '@angular/material/button'; @NgModule({ imports: [ MatBadgeModule, MatButtonModule ] }) export class AppModule {}Now let's create a model for the data binding like 'Movie'.
src/app/movie.ts:
export interface Movie { id: number; name: string; order: number; }Now let's update the 'AppComponent' file
src/app/app.component.ts:
import { Movie } from './movie'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { movies: Movie[] = [ { id: 1, name: 'Iron Man', order: 0, }, { id: 2, name: 'Avengers', order: 1, }, { id: 3, name: 'Black Panther', order: 1, } ]; }
- Here we declared a variable 'movies' of type 'Movie[]' with sample data for binding.
src/app/app.component.html:
<div class="p-container"> <div class="item-list" > <div class="item-box" *ngFor="let movie of movies" > <button mat-raised-button color="primary" matBadge="{{ movie.order }}" matBadgePosition="before" matBadgeColor="accent" > {{ movie.name }} </button> </div> </div> </div>
- (Line: 3) Looping our 'movies' items.
- (Line: 5-12) A material-designed button with badge style to it here we are binding 'item - name' and 'item - order'.
src/app/app.component.css:
.item-list { width: 500px; max-width: 100%; border: solid 1px #ccc; min-height: 60px; display: block; background: white; border-radius: 4px; overflow: hidden; } .item-box { padding: 20px 10px; border-bottom: solid 1px #ccc; color: rgba(0, 0, 0, 0.87); display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; cursor: move; background: white; font-size: 14px; } .p-container{ position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%); }Now let's run our application and see the output.
Implement Drag&Drop:
Let's add the drag&drop feature over items.
Import the 'DragDropModule' into the 'AppModule'.
src/app/app.module.ts:
// code hidden for display purpose import { DragDropModule } from '@angular/cdk/drag-drop'; @NgModule({ imports: [ DragDropModule ] }) export class AppModule {}Now let's update our 'app.component.ts' as follow.
src/app/app.component.ts:
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; export class AppComponent { // code hidden for display purpose drop(event: CdkDragDrop<string[]>){ moveItemInArray(this.movies, event.previousIndex, event.currentIndex); this.movies.map((movie, index) => {movie.order = index}) } }
- (Line: 9) The 'drop' method is registered with the 'cdkDropListDrop' event which gets invoked after dragging and dropping the item. It's an input parameter of type 'CdkDropDrop' that loads from the '@angular/cdk/drag-drop library.
- (8) The 'moveItemInArray' is the predefined method from '@angular/cdk/drag-drop'. So this method sorts the object in the array based on 'previousIndex' and 'currentInex' of the object.
- (10) So drag&drop won't update the data inside of our array of objects. But items were in sort order so using the 'map' method based on item 'index' value we can update our 'order' property.
src/app/app.component.html:
<div class="p-container"> <div cdkDropList class="item-list" (cdkDropListDropped)="drop($event)"> <div class="item-box" *ngFor="let movie of movies" cdkDrag> <button mat-raised-button color="primary" matBadge="{{ movie.order }}" matBadgePosition="before" matBadgeColor="accent" > {{ movie.name }} </button> </div> </div> </div>
- (Line: 2) The 'cdkDropList' attribute on the element indicates the area where items can be dragged and dropped. The 'cdkDropListedDropped' event was raised after dropping the item.
- (Line: 3) The 'cdkDrag' attribute makes an element draggable.
src/app/app.component.css:
.cdk-drag-preview { box-sizing: border-box; border-radius: 4px; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12); } .cdk-drag-placeholder { opacity: 0; } .cdk-drag-animating { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } .item-box:last-child { border: none; } .item-list.cdk-drop-list-dragging .item-box:not(.cdk-drag-placeholder) { transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); }Now let's run our application and try to drag&drop the items.
Support Me!
Buy Me A Coffee
PayPal Me
Video Session:
Wrapping Up:
Hopefully, I think this article delivered some useful information on Drap&Drop items in the Angular Application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Comments
Post a Comment