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

Question

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 ?

Answer 1

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}}"