Convert hyphen-case to camelCase for Component/Directive properties

[typotter]

Currently, specifying a property in camel case like myProperty works with attributes written with hyphens (like my-property). This conversion should (also) work the other way, as it is more intuitive to list the properties in the Component with the exact strings by which they'll be accessed from the template.

[rkj]

+1

[pkozlowski-opensource]

@typotter Just to be sure that we are on the same page: are you talking about properties expressed in @Directive annotation? Ex.:

@Directive({
  selector: '[some]',
  properties: ['myProp']
})
class Foo {
  myProp;
}

that could be used like <div some [my-prop]="true">?

If so, you will notice that we on a fence here as we should argue what is more important: what we write in a template or in a class? Somehow properties: ['myProp'] are "closer" (in terms of where we write code) to a class definition where we specify properties mixedCase.

[pkozlowski-opensource]

Having said this I think that we could support both versions, that is: properties: ['myProp'] and properties: ['my-prop']. There is an obvious question though - do we want to support more than one way of doing things?

[typotter]

There's already more than one way to map properties, really:
properties: const ['myVar: my-var', 'myOtherVar: myOtherOtherVar'] (where myOtherOtherVar is actually translated to my-other-other-var).

[pkozlowski-opensource]

There's already more than one way to map properties, really

@typotter OK, so what is the actionable change that you are proposing here?

[typotter]

Please support specifying properties with hyphen-case shorthand:
properties: const ['my-property']
where my-property is rewritten to myProperty when accessing the component class instance. (i.e the converse to the existing properties: const ['myProperty'] where myProperty is rewritten as my-property when searching the DOM.

[mhevery]

I am against changing this. The properties annotation list property name. We currently use HTML for template which is case insensitive, but other systems such us NativeScript or ReactNative are case sensitive. The dash-case is what we do with dealing with HTML case insensitive, and the problem goes away if we use different rendering. To bring the HTML limitation into the rest of the framework would not make sense for non-HTML renderers. The mental model is that the property is myProperty as that is the name on the object. The fact that HTML is case insensitive is HTML problem and should not pollute the rest. Declaring class has myProperty not my-property.

Closing, working as intended.

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