Display index of an Array - Angular 4+

Question

I have a drag and drop function created. The dragged elements will be dropped to an array. The dragging tools are saved in one component. And there are 3 fields text, number and date will be dragged to this form. The inputs will be listened and then inserted to the dropzone array.I need to fetch the relevant index of the array and display. But i am unable to do it. Here are the code segments.

.html

 <div *ngFor='let tool of dropzone'>

            <label>{{dropzone.tool}}  </label>
<div>

component.ts

dropzone = [];

  move(draggedTool, dropzone): void {
    dropzone.push(draggedTool);  
    console.log(dropzone);

  }  

output

(3) ["Text", "Number", "Date"]
0: "Text"
1: "Number"
2: "Date"
length: 3
__proto__: Array(0)

How can i get the index of the dragged tool and display?

Answer 1

Angular provides the index variable in ngFor so you can use it when iterating your array.

<div *ngFor='let tool of dropzone; let i = index'>
    <label>{{dropzone.tool}}</label>
    <label>{{ i }}</label>
<div>

There are other variables that the ngFor provides. You can read them from the official angular docs