bug: ion-reorder does not work with dynamic list (ngFor loop)

[vgahlaut]

bug: ion-reorder does not work with dynamic list (ngFor loop)

[sean-perkins]

Hello @vgahlaut, thanks for reporting this issue.

Are you trying to have multiple reorder groups? The documentation examples show a single reorder group, which is compatible with a dynamic list of items: https://stackblitz.com/edit/ionic-ng-menu-layout-j1sdm3?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

[vgahlaut]

I tried with following 2 ways to put for loop. First one will create multiple reorder group as it is inside loop. But second method should have only 1 reorder group. Both has same issue

First method:

<ion-app> <ion-list *ngFor="let myitem of mylist"> <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))" > <ion-item> <ion-label> {{ myitem }} </ion-label> <ion-reorder slot="end"></ion-reorder> </ion-item> </ion-reorder-group> </ion-list> </ion-app>

Second Method:

<ion-app> <ion-list> <ion-reorder-group [disabled]="false" (ionItemReorder)="handleReorder($any($event))" *ngFor="let myitem of mylist" > <ion-item> <ion-label> {{ myitem }} </ion-label> <ion-reorder slot="end"></ion-reorder> </ion-item> </ion-reorder-group> </ion-list> </ion-app>

Where should I put the loop to get it working ?

[sean-perkins]

@vgahlaut both those code snippets shared will create multiple reorder groups, one for each index of the array.

The recommend approach is to follow the example shown in the comment above: #28909 (comment)

[vgahlaut]

Ohh. Ok. Thank you so much. Please close it. My mistake for the implementation