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?

can you share more of your code specifically from draggable? — Sergey Rudenko
– Sergey Rudenko, Commented Oct 18, 2018 at 2:40
Do you want to display it inside the template where you ngFor? — Bon Macalindong
– Bon Macalindong, Commented Oct 18, 2018 at 2:41
Do this in your *ngFor='let tool of dropzone; i = index' where i will be the index. Then inside the ngFor you can use <span>{{ i }}</span> — Bon Macalindong
– Bon Macalindong, Commented Oct 18, 2018 at 2:45
Sorry, you have to add let *ngFor='let tool of dropzone; let i = index' — Bon Macalindong
– Bon Macalindong, Commented Oct 18, 2018 at 3:05

Bon Macalindong · Accepted Answer · 2018-10-18 03:12:55Z

6

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

answered Oct 18, 2018 at 3:12

Bon Macalindong

1,32013 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcel · Accepted Answer · 2020-11-07 21:07:06Z

1

Just as Bon Macalindong Pointed out correctly. Angular provides the index variable in ngFor so you can use it when iterating an array. But apart from declaring a variable with let in the *ngFor statement, you can also use the as keyword like so:

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

answered Nov 7, 2020 at 21:07

Marcel

3495 silver badges7 bronze badges

Collectives™ on Stack Overflow

Display index of an Array - Angular 4+

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related