Ionic Angular ion-reorder-group inside ion-reorder-group

Issue

<ion-reorder-group (ionItemReorder)="reorderGroup($event)" disabled="false">
  <ion-item>
    <label>Group 1</label>
    <ion-reorder-group (ionItemReorder)="reorderRow1($event)" disabled="false">
      <ion-item>Row 1<ion-reorder slot="end"></ion-reorder></ion-item>
      <ion-item>Row 2<ion-reorder slot="end"></ion-reorder></ion-item>
    </ion-reorder-group>
    <ion-reorder slot="end"></ion-reorder>
  </ion-item>
  <ion-item>
    <label>Group 2</label>
    <ion-reorder-group (ionItemReorder)="reorderRow2($event)" disabled="false">
      <ion-item>Row 1<ion-reorder slot="end"></ion-reorder></ion-item>
      <ion-item>Row 2<ion-reorder slot="end"></ion-reorder></ion-item>
    </ion-reorder-group>
    <ion-reorder slot="end"></ion-reorder>
  </ion-item>
</ion-reorder>

This is working fine but when I try to drag the item for rows also the group item move.. My question is How can I prevent the group item from moving when I move the row item.

Thanks in advance..

Solution

if someone is looking for angular nested reorder try this.. @angular/cdk/drag-drop https://material.angular.io/cdk/drag-drop/overview I use this instead of ion-reorder because I cant find nested ion-reorder... Other user deleted this answer but this is the solution that helps me and it may help others.

Answered By - Aldon Prince Velasco