How to receive the original index of the item in the list

[sourav-patra]

First of all, kudos for this awesome library! Can't thank enough for it.

So this is how I have currently implemented virtual scrolling in a container (which is basically a drag and drop list)

<div #actionContainer class="container" cdkDropList [cdkDropListData]="actionList">
   <virtual-scroller #scroll [parentScroll]="actionContainer" (vsChange)="checkEvent($event)" [items]="actionList">
      <div *ngFor="let actionItem of scroll.viewPortItems; let itemIndex = index" class="action-item"
        cdkDrag>
        <app-actions [actionItem]="actionItem" [actionIndex]="itemIndex"></app-actions>
      </div>
   </virtual-scroller>
</div>

Now, my app-action components NEED the index as they are to be displayed in their respective templates. Additionally, as this is a drag and drop environment, addition/ deletion/ reorder of components required the presence of ORIGINAL indexes of the objects in the list.

The current index passed to the component are only in reference to the view port, hence all additions/deletions/splice in the original list are done with incorrect indexes.

This library is AWESOME and covers all my use cases but I'm blocked because of this particular feature requirement. Please provide a resolution.

PS: Yes the event listeners vsChange, vsEnd provide me startIndex but they are triggered only on scroll. I need dynamic binding of the indexes with my objects to display them (and for other CRUD operations).

Also, the components app-actions are of varying length. I believe we have to use enableUnequalChildrenSizes for such cases

Environment

Windows 10.1 Angular 9.1 Angular Material 9.2.3 Angular Material CDK 9.2.3 [email protected]

[gioele-antoci]

Can you do scroller.viewPortInfo.startIndex + itemIndex ? That should work, if not you might get use startIndexWithBuffer ?

[Kartheek2016]

I had the same problem and couldn't find the solution.

Thanks @gioele-antoci This worked and to make it more clear.

• scroller.viewPortInfo.startIndex + itemIndex works when [enableUnequalChildrenSizes]="false".
• scroller.viewPortInfo.startIndexWithBuffer + itemIndex works when [enableUnequalChildrenSizes]="true".

[Ancadea]

Hey @Kartheek2016 , where do you put your code snippets inside? Do you have maybe a stackblitz or codepen example? Thank you and best regards