Reordering a List in Ionic 2

It’s super easy to create lists in Ionic 2, and it’s also super easy to allow a user to reorder them. With the addition of a simple attribute, you can turn your normal <ion-list> into a reorderable one. In this video tutorial, I walk through exactly how to create a reorderable list in Ionic 2.

Here’s the video:

Video Notes

• Reordering can be added to a standard <ion-list> by adding the reorder attribute and setting it to true
• The list will not automatically remember the position of items after reordering, you will need to bind to the ionItemReorder event on the <ion-list> and update your list accordingly
• The ionItemReorder event will send through the indexes of items in the list after a reorder
• You can import the reorderArray service from ionic-angular to make reordering your own array based on the new indexes easier, e.g. reorderArray(array, indexes)