Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set dynamic id in *ngFor?

Tags:

angular

ionic2

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.

like image 487
Kim Wong Avatar asked Jan 02 '16 17:01

Kim Wong


3 Answers

<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>
like image 65
Günter Zöchbauer Avatar answered Nov 06 '22 21:11

Günter Zöchbauer


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.

like image 17
Neenu Chandran Avatar answered Nov 06 '22 22:11

Neenu Chandran


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.

like image 8
Vipin Jain Avatar answered Nov 06 '22 20:11

Vipin Jain