diff --git a/src/components/item/item-reorder.ts b/src/components/item/item-reorder.ts
index 6128c29661..af31973468 100644
--- a/src/components/item/item-reorder.ts
+++ b/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
+ *
+ * Header
+ *
+ * {% raw %}{{ item }}{% endraw %}
+ *
+ *
+ * ```
*
* @demo /docs/v2/demos/src/item-reorder/
* @see {@link /docs/v2/components#lists List Component Docs}
@@ -205,10 +216,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));
});
}
}
@@ -341,4 +352,3 @@ export function indexForItem(element: any): number {
export function reorderListForItem(element: any): any {
return element['$ionReorderList'];
}
-
diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html
index 0148f37c7a..605da572db 100644
--- a/src/components/item/test/reorder/main.html
+++ b/src/components/item/test/reorder/main.html
@@ -19,7 +19,7 @@
-
+