feat(sortable): add support for custom item templates (#1580)

refs #1554

demo/src/app/components/sortable/demos/custom-item-template/custom-item-template.html

@@ -0,0 +1,25 @@
+<template #itemTemplate let-item="item" let-index="index"><span>{{index}}: {{item.value}}</span></template>
+
+<div class="col-xs-6 col-md-3">
+  <bs-sortable
+    [(ngModel)]="itemStringsLeft"
+    [itemTemplate]="itemTemplate"
+    itemClass="sortable-item"
+    itemActiveClass="sortable-item-active"
+    placeholderItem="Drag here"
+    placeholderClass="placeholderStyle"
+    wrapperClass="sortable-wrapper"
+  ></bs-sortable>
+  <pre>model: {{ itemStringsLeft | json }}</pre>
+</div>
+<div class="col-xs-6 col-md-3">
+  <bs-sortable
+    [(ngModel)]="itemStringsRight"
+    itemClass="sortable-item"
+    itemActiveClass="sortable-item-active"
+    placeholderItem="Drag here"
+    placeholderClass="sortable-item"
+    wrapperClass="sortable-wrapper"
+  ></bs-sortable>
+  <pre>model: {{ itemStringsRight | json }}</pre>
+</div>

demo/src/app/components/sortable/demos/custom-item-template/custom-item-template.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'custom-item-template-demo',
+  templateUrl: './custom-item-template.html'
+})
+export class CustomItemTemplateDemoComponent {
+  public itemStringsLeft: any[] = [
+    'Windstorm',
+    'Bombasto',
+    'Magneta',
+    'Tornado'
+  ];
+
+  public itemStringsRight: any[] = [
+    'Mr. O',
+    'Tomato'
+  ];
+}

demo/src/app/components/sortable/demos/index.ts

@@ -1,7 +1,12 @@
 import { ComplexDatamodelDemoComponent } from './complex-datamodel/complex-datamodel.component';
 import { SimpleItemsDemoComponent } from './simple-items/simple-items.component';
+import { CustomItemTemplateDemoComponent } from './custom-item-template/custom-item-template';
 
-export const DEMO_COMPONENTS = [SimpleItemsDemoComponent, ComplexDatamodelDemoComponent];
+export const DEMO_COMPONENTS = [
+  SimpleItemsDemoComponent,
+  ComplexDatamodelDemoComponent,
+  CustomItemTemplateDemoComponent
+];
 
 export const DEMOS = {
   complexDatamodel: {
@@ -11,5 +16,9 @@ export const DEMOS = {
   simpleItems: {
     component: require('!!raw-loader?lang=typescript!./simple-items/simple-items.component.ts'),
     html: require('!!raw-loader?lang=markup!./simple-items/simple-items.component.html')
+  },
+  itemTemplate: {
+    component: require('!!raw-loader?lang=typescript!./custom-item-template/custom-item-template.ts'),
+    html: require('!!raw-loader?lang=markup!./custom-item-template/custom-item-template.html')
   }
 };

demo/src/app/components/sortable/sortable-section.component.html

@@ -26,8 +26,9 @@ <h2>Contents</h2>
     <li><a routerLink="." fragment="usage">Usage</a></li>
     <li><a routerLink="." fragment="examples">Examples</a>
       <ul>
-        <li><a href="#stringItems">String items</a></li>
-        <li><a href="#complexDatamodel">Complex datamodel</a></li>
+        <li><a routerLink="." fragment="stringItems">String items</a></li>
+        <li><a routerLink="." fragment="complexDatamodel">Complex datamodel</a></li>
+        <li><a routerLink="." fragment="itemTemplate">Custom item template</a></li>
       </ul>
     </li>
     <li><a routerLink="." fragment="api-reference">API Reference</a>
@@ -53,6 +54,11 @@ <h2 routerLink="." fragment="complexDatamodel" id="complexDatamodel">Complex dat
     <complex-datamodel-demo></complex-datamodel-demo>
   </ng-sample-box>
 
+  <h2 routerLink="." fragment="itemTemplate" id="itemTemplate">Custom item template:</h2>
+  <ng-sample-box [ts]="demos.itemTemplate.component" [html]="demos.itemTemplate.html">
+    <custom-item-template-demo></custom-item-template-demo>
+  </ng-sample-box>
+
   <h2 routerLink="." fragment="api-reference" id="api-reference">API Reference</h2>
   <ng-api-doc id="sortable-component" directive="SortableComponent"></ng-api-doc>
 </demo-section>

demo/src/ng-api-doc.ts

@@ -1510,6 +1510,11 @@ export const ngdoc: any = {
         "type": "{ [key: string]: string; }",
         "description": "<p>style object for item </p>\n"
       },
+      {
+        "name": "itemTemplate",
+        "type": "TemplateRef<any>",
+        "description": "<p>used to specify a custom item template. Template variables: item and index; </p>\n"
+      },
       {
         "name": "placeholderClass",
         "type": "string",

src/sortable/sortable.component.ts

@@ -1,5 +1,5 @@
 import {
-  Component, Input, Output, EventEmitter, forwardRef
+  Component, Input, Output, EventEmitter, forwardRef, TemplateRef
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { DraggableItem } from './draggable-item';
@@ -34,8 +34,12 @@ import { DraggableItemService } from './draggable-item.service';
         (dragend)="resetActiveItem($event)"
         (dragover)="onItemDragover($event, i)"
         (dragenter)="cancelEvent($event)"
-    >{{item.value}}</div>
-</div>`,
+    ><template [ngTemplateOutlet]="itemTemplate || defItemTemplate"
+  [ngOutletContext]="{item:item, index: i}"></template></div>
+</div>
+
+<template #defItemTemplate let-item="item">{{item.value}}</template>  
+`,
   providers: [{
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SortableComponent),
@@ -76,6 +80,9 @@ export class SortableComponent implements ControlValueAccessor {
   /** placeholder item which will be shown if collection is empty */
   @Input() public placeholderItem: string = '';
 
+  /** used to specify a custom item template. Template variables: item and index; */
+  @Input() public itemTemplate: TemplateRef<any>;
+
   /** fired on array change (reordering, insert, remove), same as <code>ngModelChange</code>.
    *  Returns new items collection as a payload.
    */