Angular Material In Depth

Author: jhades

src/_mixins.scss

@@ -0,0 +1,31 @@
+@mixin drag-drop {
+
+  .cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    font-family: Roboto;
+    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-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .lesson:last-child {
+    border: none;
+  }
+
+  .drag-drop-list.cdk-drop-list-dragging .drag-drop-item:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+  .drop-placeholder {
+    background: #ccc;
+    border: dotted 3px #999;
+    min-height: 60px;
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
+}

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import {AboutComponent} from "./about/about.component";
 import {CourseComponent} from "./course/course.component";
 import {CourseResolver} from "./services/course.resolver";
 import {CreateCourseComponent} from './create-course/create-course.component';
+import {DragDropComponent} from './drag-drop/drag-drop.component';
 
 const routes: Routes = [
     {
@@ -26,6 +27,10 @@ const routes: Routes = [
   {
     path: 'add-new-course',
     component: CreateCourseComponent
+  },
+  {
+    path: "drag-drop-example",
+    component: DragDropComponent
   },
     {
         path: "**",

src/app/app.module.ts

@@ -39,6 +39,9 @@ import {MatRadioModule} from '@angular/material/radio';
 import {MatNativeDateModule} from '@angular/material/core';
 import {MatSliderModule} from '@angular/material/slider';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {DragDropComponent} from './drag-drop/drag-drop.component';
+
 
 @NgModule({
     declarations: [
@@ -50,7 +53,8 @@ import {MatTooltipModule} from '@angular/material/tooltip';
         CourseDialogComponent,
         CreateCourseComponent,
         CreateCourseStep1Component,
-        CreateCourseStep2Component
+        CreateCourseStep2Component,
+        DragDropComponent
     ],
     imports: [
         BrowserModule,
@@ -75,6 +79,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
         AppRoutingModule,
         MatSelectModule,
         MatCheckboxModule,
+        DragDropModule,
         MatRadioModule,
         MatSliderModule,
         MatDatepickerModule,

src/app/drag-drop/drag-drop.component.html

@@ -0,0 +1,16 @@
+
+<div class="drag-drop-container">
+
+  <div class="pending">
+
+    <h3>Lessons To Watch:</h3>
+
+  </div>
+
+  <!-- div class="done">
+
+    <h3>Done:</h3>
+
+  </div-->
+
+</div>

src/app/drag-drop/drag-drop.component.scss

@@ -0,0 +1,49 @@
+
+.drag-drop-container {
+  font-family: "Roboto";
+  display: flex;
+  justify-content: center;
+}
+
+.lessons-list {
+  width: 500px;
+  max-width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+
+.lesson {
+  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;
+}
+
+.done {
+  margin-left: 30px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+

src/app/drag-drop/drag-drop.component.ts

@@ -0,0 +1,93 @@
+import {Component} from '@angular/core';
+import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
+import {Lesson} from '../model/lesson';
+
+
+@Component({
+  selector: 'drag-drop-example',
+  templateUrl: "drag-drop.component.html",
+  styleUrls: ["drag-drop.component.scss"]
+})
+export class DragDropComponent {
+
+  lessons = [
+    {
+      id: 120,
+      'description': 'Introduction to Angular Material',
+      'duration': '4:17',
+      'seqNo': 1,
+      courseId: 11
+    },
+    {
+      id: 121,
+      'description': 'Navigation and Containers',
+      'duration': '6:37',
+      'seqNo': 2,
+      courseId: 11
+    },
+    {
+      id: 122,
+      'description': 'Data Tables',
+      'duration': '8:03',
+      'seqNo': 3,
+      courseId: 11
+    },
+    {
+      id: 123,
+      'description': 'Dialogs and Overlays',
+      'duration': '11:46',
+      'seqNo': 4,
+      courseId: 11
+    },
+    {
+      id: 124,
+      'description': 'Commonly used Form Controls',
+      'duration': '7:17',
+      'seqNo': 5,
+      courseId: 11
+    },
+    {
+      id: 125,
+      'description': 'Drag and Drop',
+      'duration': '8:16',
+      'seqNo': 6,
+      courseId: 11
+    },
+    {
+      id: 126,
+      'description': 'Responsive Design',
+      'duration': '7:28',
+      'seqNo': 7,
+      courseId: 11
+    },
+    {
+      id: 127,
+      'description': 'Tree Component',
+      'duration': '11:09',
+      'seqNo': 8,
+      courseId: 11
+    },
+    {
+      id: 128,
+      'description': 'Virtual Scrolling',
+      'duration': '3:44',
+      'seqNo': 9,
+      courseId: 11
+    },
+    {
+      id: 129,
+      'description': 'Custom Themes',
+      'duration': '8:55',
+      'seqNo': 10,
+      courseId: 11
+    },
+    {
+      id: 130,
+      'description': 'Changing Theme at Runtime',
+      'duration': '12:37',
+      'seqNo': 11,
+      courseId: 11
+    }
+  ];
+
+}