Reordering a List in Ionic 2

Reordering a List in Ionic 2

Follow Josh Morony on

Learn Ionic with Josh ☕

Hey, I hope you enjoy the article.

If you want a weekly update with my newest content, access to the blog's bonus content, or you want to sign up for one of my free beginner or advanced email courses just enter your details here or in the form below.

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 your friends ☝

Check out my latest videos: