Reorder Items List

Ionic Framework ionic-v3
1

I’d like to implement a button for I can reorder the items of the list dragging it, I looked at ionic documentation but a didn’t find a way to do that.

Thanks for help

3 Likes
2

neozaru@mailoo.orgHello,

Same problem here.
I was trying Ionic 2 this Week-End.
Most of the components are working great (and out of the box) so I could develop a draft super fast.

I’m looking for a way to reproduce the v1’s behavior (http://ionicframework.com/docs/api/directive/ionReorderButton/).

It seems that it is not implemented in v2 yet, am I wrong ?
Are you looking for some contributions/PR or is this feature already in the pipes ?

Thanks :stuck_out_tongue:

3

Hi guys… Also trying out Ionic2, but I need the re-order button also, as we have in Ionic. Did you find a solution for this? Thanks :slight_smile:

4

You can use something like :
< ion-list reorder=“true” (ionItemReorder)=“reorderItems($event)” >

And reorderItems can use the reorderArray,
import {reorderArray} from ‘ionic-angular’;

and then just reorder using the following:
this.itemTree = reorderArray(this.itemTree, event);

1 Like
5

Hi @Richa123

My goal is to have a button which can enable/disable reorder functionality.

When I try to change “reorder” attribute dinamically, nothing happens. I’m not sure why Angular (or ion-list component) ignores change detection.
It changes “reorder” property only when I click on list item, go to item details (which is separate page) and get back to list.
Then my list become enabled to order.

Also, I have to set square brackets to “reorder” property in order to perform change detection [reorder]="true".

I can’t see any documentation for list reorder on Ionic site which is totally weird.

Thanks

6

Why not to use the css flex order instead?

7

Hi @nmdia…

Any luck? I am also facing the same problem

I have patched it for now by using a ngIf directive. See if that works for you as well.

8

Hi @Richa123

Nothing yet but I will try to implement “reorder button” click as an Observable and see what will happen.

9

Hi @nmdia,

Try this code, it works for me:

In task-list.html add a button with (click)="activateReordering()"
Put a {{reorder}} value to your reorder ion-list attribute.

Then in your task-list.ts:
`import { Component } from ‘@angular/core’;
import { NavController, reorderArray } from ‘ionic-angular’;

@Component({
templateUrl: ‘build/pages/task-list/task-list.html’,
})

export class TaskListPage {

items: any = [];
reorder = “false”;

constructor(private navCtrl: NavController) {
this.items = [
{title: ‘item1’},
{title: ‘item2’},
{title: ‘item3’},
{title: ‘item4’},
{title: ‘item5’},
{title: ‘item6’}
];
}

public reorderItems(indexes) {
this.items = reorderArray(this.items, indexes);
}

public activateReordering() {
var state = this.reorder;
if(state === “true”){
this.reorder = “false”;
}
else{
this.reorder = “true”;
}
}

}
`

1 Like
10

Here is the solution: List Item Reordering: Ionic 2 Finally!