Give dynamic id Angular2 Binds

Question

My JavaScript:

 this.items = [
            {name: \'Amsterdam1\', id: \'1\'},
            {name: \'Amsterdam2\', id: \'2\'},
            {name: \'Amsterdam3\', i         


        

Answer 1

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:

    

      

        {{ item.name}} ID: {{elem.id}}
      
     

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.