how to get array length in Angular Drag and Drop Component

Question

I want to display the visited countries in the dropped list (where have you been) How to solve this in my Ionic App https://mytopcountries.web.app/tabs/home

<div class="example-container">
  <h2>Where have you been</h2>

  <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
   class="example-list" (cdkDropListDropped)="drop($event)">
   <div class="example-box" *ngFor="let item of done" cdkDrag>
    <div class="flag-box">
     <img [src]="item.url" alt="flag image">
     <p>{{ item.name }}</p>
    </div>
   </div>
  </div>
 </div>
</div>



 done = [
{url: 'https://www.countryflags.io/ad/shiny/64.png', name: 'Andorra' },
{url: 'https://www.countryflags.io/ae/shiny/64.png', name: 'UAE' },
{url: 'https://www.countryflags.io/at/shiny/64.png', name: 'Austria' },
{url: 'https://www.countryflags.io/au/shiny/64.png', name: 'Australia' },
{url: 'https://www.countryflags.io/aw/shiny/64.png', name: 'Aruba' },
{url: 'https://www.countryflags.io/bg/shiny/64.png', name: 'Bulgaria' },
{url: 'https://www.countryflags.io/ch/shiny/64.png', name: 'Switzerland' },
{url: 'https://www.countryflags.io/cn/shiny/64.png', name: 'China' },

];

  drop(event: CdkDragDrop<any[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
    }
  }
}


I want to display the visited countries in the dropped list  (where have you been)
How to solve this in my Ionic App
https://mytopcountries.web.app/tabs/home

Answer 1

You can use this syntax to set the index value into an attribute of the HTML Element:

YOUR HTML ELEMENT:

<div class="example-box" *ngFor="let item of done"; let i = index" [attr.data-index]="i" cdkDrag>
... </div>

Or you can use a syntax like:

   <div class="example-box" *ngFor="let item of done; index as i" crkDrag>
     //And use it like that
   <p> {{i+1}} {{item}} </p>
   </div>

Answer 2

all arrays iterating, basically I only want to display "55 countries visited

   <div class="example-box" *ngFor="let item of done; " [attr.data-index]="i" cdkDrag>
 <p> {{done.length}} countries visited</p>
  </div>