InvalidCharacterError with special character in attribute name

[wkwiatek]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Creating input name for a component like test$ or something@ will produce error:

InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-test$' is not a valid attribute name

Reproduction of the problem
http://plnkr.co/edit/p4AOGZsrmXgStWa9eDtf?p=preview

What is the expected behavior?
Valid JS name should also be a valid name in template.

Please tell us about your environment:
Mac OS X 10.11.5

• Angular version: 2.0.0-rc.3
• Browser: all
• Language: TypeScript 1.8.10

[vicb]

Valid JS name should also be a valid name in template.

Well not exactly.... JS and HTML both have spec that tell you what is a valid name or name.

That being said, you are right for this particular case x-y$ is a valid html attribute name

"Failed to execute 'setAttribute' on 'Element': 'ng-reflect-test$' is not a valid attribute name" is your browser complaining, not angular. Which means that the bug is in your browser.

We will have to workaround this browser bug in Angular. Thanks for your report.

[wkwiatek]

Maybe it's more like a wish but I think that having own html parser (which supports e.g. camelCase) could also make possible to put JS names as inputs.

Thanks!

[vicb]

1. Our parser is (almost) HTML compliant,
2. Once again this is not the problem here angular works just fine, see "the bug is in your browser." in my former response.

A workaround could be to set logBindingUpdate to false in the CompiilerConfig. (it is only true in dev mode by default).

[wkwiatek]

Sure. Thanks!

[vicb]

We need to sanitize the name so that all browsers are happy

[minrwhite]

Can I take this one? My current line of thinking is that some form of reversible escaping will be necessary so there won't be conflicts between components with/without the special characters.

[miller-time]

When you provide an alternative binding string, such as @Input('test') test$, could the reflect attribute use the alias instead of the property? (i.e. "ng-reflect-test" instead of "ng-reflect-test$")

[maartentibau]

Any news on whether or not this issue will be fixed? Or will this just be not an option as for HTML sanitation reasons?

[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.}