0

Every {{item}} works well except for="{{item}}". It shows:

EXCEPTION: Template parse errors: Can't bind to 'for' since it isn't a known native property

<div *ngFor="#item of collection">
    <input type="radio" name="item" id="{{item}}" value="{{item}}">
    <label for="{{item}}">
        {{item}}
    </label>
</div>

How can I make it work? Thanks!

Hongbo Miao
  • 45,290
  • 60
  • 174
  • 267
  • Possible duplicate of [Can't bind to 'for' since it isn't a known native property angular2](http://stackoverflow.com/questions/35229960/cant-bind-to-for-since-it-isnt-a-known-native-property-angular2) – Pardeep Jain Feb 17 '16 at 04:45

1 Answers1

2

for isn't an property, it's only an attribute. Use instead explicit attribute binding:

 <label [attr.for]="item">

or 

 <label attr.for="{{item}}">

See also https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement "htmlFor (DOMString) The ID of the labeled control. Reflects the for attribute."

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    For people who also don't know difference between property and attribute, this is useful: http://lucybain.com/blog/2014/attribute-vs-property/ – Hongbo Miao Feb 16 '16 at 22:31
  • See also https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement "`htmlFor` (DOMString) The ID of the labeled control. Reflects the `for` attribute." – Günter Zöchbauer Feb 16 '16 at 22:37