refactor(sample): use component in the samples

Author: nivekcode

projects/ng-sortgrid-demo/src/app/app.module.ts

@@ -9,6 +9,7 @@ import {GettingStartedMemoryComponent} from './examples/getting-started/getting-
 import {StepComponent} from './examples/step/step.component';
 import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
 import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
+import {CardComponent} from './examples/card/card.component';
 
 @NgModule({
   declarations: [
@@ -18,7 +19,8 @@ import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
     GettingStartedMemoryComponent,
     StepComponent,
     ReactOnChangesMemoryComponent,
-    GroupsMemoryComponent
+    GroupsMemoryComponent,
+    CardComponent
   ],
   imports: [BrowserModule, NgsgModule],
   providers: [],

projects/ng-sortgrid-demo/src/app/examples/card/card.component.css

@@ -0,0 +1,21 @@
+.card {
+  width: 200px;
+  height: 200px;
+  border: solid 1px #ccc;
+  font-size: 30pt;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.87);
+  cursor: move;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #fff;
+  border-radius: 4px;
+  position: relative;
+  z-index: 1;
+  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
+  0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  0 1px 5px 0 rgba(0, 0, 0, 0.12);
+}

projects/ng-sortgrid-demo/src/app/examples/card/card.component.html

@@ -0,0 +1,5 @@
+<div>
+  <h1 style="color: darkslategray">
+    {{ item }}
+  </h1>
+</div>

projects/ng-sortgrid-demo/src/app/examples/card/card.component.ts

@@ -0,0 +1,11 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'ngsg-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css']
+})
+export class CardComponent {
+
+  @Input() item: number;
+}

projects/ng-sortgrid-demo/src/app/examples/getting-started/getting-started-memory.component.html

@@ -1,6 +1,10 @@
-<h5 style="margin-bottom: 20px">3. Drag the items around - hold CMD or Control and click on an item to select multiple files</h5>
+<h5 style="margin-bottom: 20px">3. Drag the items around - hold CMD or Control and click on an item to select multiple
+  files</h5>
 <div class="example-container">
-  <div *ngFor="let item of items" ngSortgridItem [ngSortGridItems]="items" class="example-box">
-    {{ item }}
-  </div>
+  <ngsg-card *ngFor="let item of items"
+             ngSortgridItem
+             [ngSortGridItems]="items"
+             [item]="item"
+             class="example-box">
+  </ngsg-card>
 </div>

projects/ng-sortgrid-demo/src/app/examples/groups/groups-memory.component.html

@@ -1,26 +1,26 @@
 <div class="row">
   <div class="col">
     <div class="example-container">
-      <div *ngFor="let item of items"
+      <ngsg-card *ngFor="let item of items"
            ngSortgridItem
            ngSortGridGroup="one"
+           [item]="item"
            [ngSortGridItems]="items"
-           (sorted)="applyOrder($event)"
            class="example-box">
         {{ item }}
-      </div>
+      </ngsg-card>
     </div>
   </div>
   <div class="col">
     <div class="example-container">
-      <div *ngFor="let item of items"
+      <ngsg-card *ngFor="let item of items"
            ngSortgridItem
            ngSortGridGroup="two"
+           [item]="item"
            [ngSortGridItems]="items"
-           (sorted)="applyOrder($event)"
            class="example-box">
         {{ item }}
-      </div>
+      </ngsg-card>
     </div>
   </div>
 </div>

projects/ng-sortgrid-demo/src/app/examples/react-on-changes/react-on-changes-memory.component.html

@@ -5,11 +5,12 @@ <h2 class="card-text">{{ sortOrder }}</h2>
   </div>
 </div>
 <div class="example-container">
-  <div *ngFor="let item of items"
+  <ngsg-card *ngFor="let item of items"
        ngSortgridItem
+       [item]="item"
        [ngSortGridItems]="items"
        (sorted)="applyOrder($event)"
        class="example-box">
     {{ item }}
-  </div>
+  </ngsg-card>
 </div>