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

[nosachamos]

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.

[pkozlowski-opensource]

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.

[nosachamos]

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.

[angular-automatic-lock-bot]

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

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}