Variable in HTML tag using Angular2

Question

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 !

Possible duplicate stackoverflow.com/questions/34704671/…

yurzui
– yurzui

2016-06-13 14:27:38 +00:00
Commented Jun 13, 2016 at 14:27 — yurzui
– yurzui, Commented Jun 13, 2016 at 14:27

Thierry Templier · Accepted Answer · 2016-06-13 14:24:11Z

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?

answered Jun 13, 2016 at 14:24

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Günter Zöchbauer Over a year ago

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.

Collectives™ on Stack Overflow

Variable in HTML tag using Angular2

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related