Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Give dynamic id Angular2 Binds

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.

like image 829
user2924127 Avatar asked Mar 17 '16 03:03

user2924127


2 Answers

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

like image 53
Angel Angel Avatar answered Oct 19 '22 09:10

Angel Angel


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.

like image 28
Pardeep Jain Avatar answered Oct 19 '22 09:10

Pardeep Jain