2

I'm trying to have an independent input for each element that I display thanks to *ngFor in Angular2, I try this but it doesn't work :

<li *ngFor="let child of childArray; let i=index"> <input type="checkbox" id="{{child.name}}" style="display:none;">
    <label for="{{child.name}}">
       <h1>{{child.name}}</h1> 
   </label></li>

Of course {{child.name}} is correctly displayed but it seems I can't use it as a variable in tag component. Does someone have an idea to manage it ?

Thanks by advance !

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
slidefizz
  • 257
  • 5
  • 12
  • Possible duplicate http://stackoverflow.com/questions/34704671/error-while-adding-for-attribute-to-label-in-angular-2-0-template – yurzui Jun 13 '16 at 14:27

1 Answers1

2

You could try the following:

<li *ngFor="let child of childArray; let i=index">
  <input type="checkbox" [attr.id]="child.name" style="display:none;">
  <label [attr.for]="child.name">
    <h1>{{child.name}}</h1> 
  </label>
</li>

When you say "I can't use it as a variable in tag component", what do you mean? The attribute doesn't contain the value?

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • 1
    Comment from @slidefizz (to preserve it when his "answer" gets deleted): Thank you for your answer it works with your syntax, by "I can't use it as a variable in tag component" I mean that `id="{{child.name}}` and `for="{{child.name}}"` don't work with this syntax, `for` and `id` being the `tag component` (or maybe "tag attribute" is a better meaning) and `{{child.name}}` the variable. – Günter Zöchbauer Jun 14 '16 at 08:09