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

13,151

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}}" 
Share:
13,151

Related videos on Youtube

Pardeep Jain
Author by

Pardeep Jain

JavaScript developer | Contributor | Writer. | Angular ❤️ | I'm looking for projects to work on. Reach me out for any work here [email protected] Twitter | LinkedIn | YouTube | Facebook | Github | Medium | Quora Angular Community India | Ranked 1 as a contributor in India for Angular

Updated on July 26, 2022

Comments

  • Pardeep Jain
    Pardeep Jain over 1 year

    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 ?

  • Pardeep Jain
    Pardeep Jain about 8 years
    wow it works fine thanks ! may i know why to use attr in the attr.for instead of simply for ?
  • Günter Zöchbauer
    Günter Zöchbauer about 8 years
    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.
  • Mark Rajcok
    Mark Rajcok about 8 years
    "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.
  • Günter Zöchbauer
    Günter Zöchbauer about 8 years
    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.