Give dynamic id Angular2 Binds

Question

My JavaScript:

 this.items = [
            {name: 'Amsterdam1', id: '1'},
            {name: 'Amsterdam2', id: '2'},
            {name: 'Amsterdam3', id: '3'}
        ];

My HTML:

<ul>
  <li *ngFor="#item of items" id={{item.id}}>
    {{ item.name}}
  </li>
</ul>

I want to assign a dynamic id to each element, but can't get it to work. The name is showing up but the id is not.

I think you need to wrap the id value in quotes. `id="{{item.id}}"` — forgivenson, Mar 17 '16 at 03:35
A quick search got me this: [How to set the id attribute of a HTML element dynamically with Angular JS](http://stackoverflow.com/a/23655154/689044) — Michael Earls, Mar 17 '16 at 03:48

score 50 · Answer 1 · edited Sep 11 '17 at 23:39

the way you said works, Angular 2.0.0.beta.8.

in this case you can use for example:

[id]="item.id"
[attr.id]="item.id"

id={{item.id}}

     <ul>
      <li *ngFor="#item of items" #elem [id]="item.id">
        {{ item.name}} ID: {{elem.id}}
      </li>
     </ul>

     <ul>
      <li *ngFor="#item of items" #elem [attr.id]="item.id">
        {{ item.name}} ID: {{elem.id}}
      </li>
     </ul>

     <ul>
      <li *ngFor="#item of items" #elem id={{item.id}}>
        {{ item.name}} ID: {{elem.id}}
      </li>
     </ul>

`Plunker`

You can look here for more information in Template syntax.

https://angular.io/guide/cheatsheet

score 14 · Answer 2 · answered Mar 17 '16 at 05:45

All the methods provided by @AngelAngel are correct but just to explain why to use [attr.id] posted as answer.

Angular by default uses property binding. To tell Angular explicitly to use attribute binding, we use instead:

    <ul>
      <li *ngFor="#item of items" #elem [attr.id]="item.id">
        {{ item.name}} ID: {{elem.id}}
      </li>
     </ul>

With attr.id you have to explicitly opt in to attribute binding because attribute binding is expensive. Attributes are reflected in the DOM and changes require for example to check if CSS selectors are registered that match with this attribute set. Property binding is JS only and cheap, therefore the default.

score 5 · Answer 3 · answered Aug 20 '17 at 12:30

5

<ul>
 <li *ngFor="#item of items" attr.id={{item.name}}>
  {{ item.name}}
 </li>
</ul>

This should work (worked for me on angular2).

answered Aug 20 '17 at 12:30

Amazia Gur

1,692
17
16

score 1 · Answer 4 · answered Mar 17 '16 at 03:58

1

I found the answer. I can use [attr.id] tag on the 'li' tag.

answered Mar 17 '16 at 03:58

user2924127

6,034
16
78
136

you can use comment instead of answer for this line – Pardeep Jain Apr 03 '16 at 09:34

Give dynamic id Angular2 Binds

4 Answers4

`Plunker`

Linked