How to set dynamic id in *ngFor?

Question

How to set dynamic id in Angular 2?

I have tried:

<div class = "CirclePoint" *ngFor="#c of circles" id = "{{ 'Location' + c.id }}"></div>

this.circles = [
        { x: 50 , y: 50 ,id : "oyut1" },
        { x: 100 , y: 100 ,id : "oyut3"  },
        { x: 150 , y: 150 ,id : "oyut2"  }
];

but it does not work.

score 152 · Accepted Answer · edited Mar 13 '22 at 20:27

152

<div class = "CirclePoint" *ngFor="let c of circles" 
    [attr.id]="'Location' + c.id">
</div>

<div class = "CirclePoint" *ngFor="let c of circles" 
    attr.id="Location{{c.id}}">
</div>

edited Mar 13 '22 at 20:27

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Jan 02 '16 at 21:47

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks for the feedback, I thought there were a few common attributes with special treatment but maybe I mixed something up. – Günter Zöchbauer Jan 03 '16 at 08:46

score 19 · Answer 2 · answered Sep 16 '19 at 07:21

This also will work:

<div class = "CirclePoint" *ngFor="let c of circles">
   <div [id]="c.id"></div>
</div>

If you want to add a prefix, say "loc";

<div class = "CirclePoint" *ngFor="let c of circles">
   <div [id]="'loc' + c.id"></div>
</div>

Using [] helps to add values dynamically.

score 9 · Answer 3 · edited May 29 '19 at 11:56

9

Try this:

 <div class = "CirclePoint" *ngFor="let c of circles">
     <div id="location_{{c.id}}">write something which you want like c.x </div>
 </div>`

Hopefully this will work for you. I searched StackOverflow and I found this answer.

edited May 29 '19 at 11:56

Pardeep Jain

84,110
37
165
215

answered Jan 02 '16 at 17:25

Vipin Jain

3,686
16
35

Thank you for your answer. But i am working on angular2 "ng-attr-id" doesn't work anymore. – Kim Wong Jan 02 '16 at 17:39
sorry i don't work in angular2 without see tag, I response you.I found some answer from net – Vipin Jain Jan 02 '16 at 17:48

score 1 · Answer 4 · answered Mar 17 '21 at 19:58

1

INDEX CAN BE USED AS DYNAMIC ID

<div class="test" *ngFor="let item of data; let i = index">
<div class="function_div" (click)="test(i);">Test Button </div>
    {{item}}
</div>

answered Mar 17 '21 at 19:58

Nadeeshan Herath

445
5
9

score 0 · Answer 5 · edited Oct 31 '17 at 19:39

0

Inside the component tag instead of the usual id="#c" use [id]="#c". This also applies to dynamic class names. See example below:

<div class = "CirlePoit" *ngFor="#c of circles" [id] = "#c"> </div>

edited Oct 31 '17 at 19:39

Nissa

4,636
8
29
37

answered Oct 31 '17 at 19:16

Norman Pilusa

337
2
5

How to set dynamic id in *ngFor?

5 Answers5

Linked