Can't bind to 'for' since it isn't a known native property angular2
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}}"
Related videos on Youtube
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, 2022Comments
-
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 about 8 yearswow it works fine thanks ! may i know why to use
attr
in theattr.for
instead of simplyfor
? -
Günter Zöchbauer about 8 yearsWith
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 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 about 8 yearsHmm, 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.