I am currently working on a project utilizing Angular 8.3.
In my code, I have a loop using *ngFor where each dynamically added div needs to have a unique reference name.
Here's an example of the code:
<div *ngFor="let item of list; let i = index;">
<div
cdkDropList
#done0="cdkDropList"></div>
</div>
Additionally, there is another drag and drop zone that should receive these elements:
<div
cdkDropList
#donesList="cdkDropList"
[cdkDropListData]="DonesList"
[cdkDropListConnectedTo]="[done0, done1]"
class="movie-list"
(cdkDropListDropped)="onDrop($event)">
<div *ngFor="let itemList of DonesList" cdkDrag>{{itemList}}</div>
</div>
My challenge lies in changing #done0 dynamically to #done1, #done2, etc.
Is there a way to achieve this using something like #done{{i}}? I have attempted this but it did not work as expected.
If you have any insights on how to use trackBy in this scenario, please share your advice.
Thank you,