Tutorial hero image
Lesson icon

Reordering a List in Ionic 2

1 min read

Originally published February 23, 2017

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)

If you enjoyed this article, feel free to share it with others!