Angular: Binding to unknown properties (such as Aria attributes) results in error.

Created on 27 Sep 2015 · 3Comments · Source: angular/angular

Binding to unknown properties such as Aria attributes result in error. For example:

<a class="cell-anchor " [aria-expanded]="isFirstError(error)" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{error.id}}" aria-expanded="false">

Will result in the following exception when the component whose template includes this code is loaded:

EXCEPTION: Can't bind to 'ariaExpanded' since it isn't a known property of the '' element and there are no matching directives with a corresponding property

It turns out, aria attributes often include dashes, so we are converting to ariaExpanded which ins't really correct (perhaps there is a escaping mechanism I'm not aware of?'). That is not the root cause of this, though, as binding to anything unknown will cause the same issue:

EXCEPTION: Can't bind to 'foo' since it isn't a known property of the '' element and there are no matching directives with a corresponding property

Please let me know if a plunker is needed and I'll create one.

Source

nosachamos

Most helpful comment

DOM elements don't have aria-expanded _property_ there is only an _attribute_ with such name. If you want to bind to an attribute you need to prefix its name with attr., ex.: [attr.aria-expanded]="isFirstError(error)".

So the error is correct and we definitively want to throw for unknown properties since binding to a non-existing properties wouldn't have any effect - this is a user error most of the time.

pkozlowski-opensource on 27 Sep 2015

👍47 ❤2 🎉2

All 3 comments

So the error is correct and we definitively want to throw for unknown properties since binding to a non-existing properties wouldn't have any effect - this is a user error most of the time.

pkozlowski-opensource on 27 Sep 2015

👍47 ❤2 🎉2

Cool, I was not aware of the attr. prefix. This must be clearly documented, whenever the time to go GA comes.

I do think, however, that there is an opportunity to improve the message we give when the binding misses the attr. prefix. If we could just print out something like this, I wouldn't even need the documentation:

*_EXCEPTION: Can't bind to 'foo' since it isn't a known property of the '' element and there are no matching directives with a corresponding property. If this is an attribute, make sure to prefix its name with 'attr.' *_

This issue could be used to track improving this message.

nosachamos on 28 Sep 2015

👍9

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.