feat(reorder): add applyTo method to ionItemReorder event

This allows to apply reordering inside template without importing any other helper functions

Author: stalniy

src/components/item/item-reorder.ts

@@ -4,12 +4,13 @@ import { Content } from '../content/content';
 import { CSS, zoneRafFrames } from '../../util/dom';
 import { Item } from './item';
 import { ItemReorderGesture } from '../item/item-reorder-gesture';
-import { isTrueProperty } from '../../util/util';
+import { isTrueProperty, reorderArray } from '../../util/util';
 
 
 export interface ReorderIndexes {
   from: number;
   to: number;
+  applyTo: Function;
 }
 
 /**
@@ -118,6 +119,16 @@ export interface ReorderIndexes {
  *   }
  * }
  * ```
+ * Alternatevely you can execute helper function inside template:
+ *
+ * ```html
+ * <ion-list>
+ *   <ion-list-header>Header</ion-list-header>
+ *   <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
+ *     <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
+ *   </ion-item-group>
+ * </ion-list>
+ * ```
  *
  * @demo /docs/v2/demos/src/item-reorder/
  * @see {@link /docs/v2/components#lists List Component Docs}
@@ -223,10 +234,10 @@ export class ItemReorder {
     this.reorderReset();
     if (fromIndex !== toIndex) {
       this._zone.run(() => {
-        this.ionItemReorder.emit({
-          from: fromIndex,
-          to: toIndex,
-        });
+        const indexes = { from: fromIndex, to: toIndex };
+        this.ionItemReorder.emit(Object.assign({
+          applyTo: (array) => reorderArray(array, indexes)
+        }, indexes));
       });
     }
   }
@@ -368,4 +379,3 @@ export function indexForItem(element: any): number {
 export function reorderListForItem(element: any): any {
   return element['$ionReorderList'];
 }
-

src/components/item/test/reorder/main.html

@@ -19,7 +19,7 @@
     </button>
   </ion-list>
 
-  <ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
+  <ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)">
     <ion-item-sliding *ngFor="let item of items">
       <button ion-item (click)="clickedButton(item)">
         <h2>Sliding item {{item}}</h2>