Reorder-group and items when ion-reorder tag not in page or template

@FA85 wrote:

Hi,

I’m creating a custom list component for my needs with custom item components wrapped by a angular templates. When moving the item template into the custom item’s html-file I ran into trouble:

• The reorder handle is shown as expected beneath each item
• The item drag animation is not shown, the item stays where it has been before
• When i drop the item anywhere it is always placed at the end of the list, disrespecting where i dropped it (even if I don’t see where I dropped it, because the drag animation is not shown …)

The page’s and components’ TypeScript is the same in both cases. Only change is abstracting the <ion-item> with it’s nested <ion-reorder> into the <app-item> component.

Below I’m showing the working and not working html-code:

Working
page.html

<app-list [list$]="data$" [editable]="true">
  <ng-template let-item>
    <ion-item>
      <ion-label>{{ item.id }}</ion-label>
      <ion-reorder></ion-reorder>
    </ion-item>
  </ng-template>
</app-list>

list.component.html

<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!editable">
  <ng-template ngFor let-item [ngForOf]="list$ | async" [ngForTemplate]="itemTemplate">
  </ng-template>
</ion-reorder-group>

Not working
page.html

<app-list [list$]="data$" [editable]="true">
  <ng-template let-item>
    <app-item>{{ item-id }}</app-item>
  </ng-template>
</app-list>

list.component.html

<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!editable">
  <ng-template ngFor let-item [ngForOf]="list$ | async" [ngForTemplate]="itemTemplate">
  </ng-template>
</ion-reorder-group>

item.component.html

<ion-item>
  <ion-label><ng-content></ng-content></ion-label>
  <ion-reorder></ion-reorder>
</ion-item>

I’m not sure if this is an issue or I am doing something wrong or forgot something, or whatever.

I am on Angular 8.1.3 and Ionic 5.4.1.

Regards,
FA85

Posts: 1

Participants: 1

Read full topic