25

I have to Create a list of checkboxes dynamically so i have used *ngFor to iterate the array of objects everything is working fine till iteration. the problem is occured when i set the value of for attribute in the label tag. angular has throw the error :

Can't bind to 'for' since it isn't a known native property angular2

new error message

Unhandled Promise rejection: Template parse errors: Can't bind to 'for' since it isn't a known property of 'label'.

<div *ngFor="#batch of batch_array">
  <label for="{{batch.id}}">
    <input type="checkbox" 
           [value]="batch.id"
           id="{{batch.id}}"    
           (click)="batchSelectedEevent(batch.id)"/>
    {{batch.batch_name}} 
  </label>
</div>

here is my plnkr showing error : http://plnkr.co/edit/aAQfWvHc7h7IBuYzpItO?p=preview

whats wrong here in my code ?

jocassid
  • 4,429
  • 1
  • 13
  • 6
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215

1 Answers1

29

update

In Angular2 final [for]="xxx" should work fine. They added an alias from for to htmlFor.

original

Angular by default uses property binding but label doesn't have a property for. To tell Angular explicitly to use attribute binding, use instead:

[attr.for]="someField"

or

attr.for="{{someField}}"

instead.

These also work because htmlFor is the property for is reflected to.

[htmlFor]="someField"
htmlFor="{{someField}}"

In Angular2 RC.6 an alias was added so these should now work as well:

[for]="someField"

or

for="{{someField}}"
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • wow it works fine thanks ! may i know why to use `attr` in the `attr.for` instead of simply `for` ? – Pardeep Jain Feb 05 '16 at 17:38
  • 1
    With `attr.for` 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. – Günter Zöchbauer Feb 05 '16 at 17:41
  • 1
    "Property binding is JS only". I wouldn't quite say that. There are a few properties that don't have corresponding attributes -- e.g., the heavily-used `textContent` property -- so binding to these properties also results in the DOM being updated. – Mark Rajcok Feb 05 '16 at 21:14
  • Hmm, I would say this is a side effect but not directly related to the attribute binding itself. It is functionality that is invoked by the element when it gets data passed through an attribute. Interesting aspect to be aware of nonetheless. – Günter Zöchbauer Feb 05 '16 at 21:28