CODEWITHSUNDEEP
typescriptangular
Nick
Nick

Reputation: 783

Angular2 input variable name mapping rule?

I am watching a Angular2 tutorial source code here:

http://plnkr.co/edit/AHrB6opLqHDBPkt4KpdT?p=preview

I found that the parent component has

[my-prop]="value"

but the name 'my-prop' doesn't exist inside the child component. Instead, the child use the name 'myProp'.

@Input() myProp: any;

Is there some hidden rule that will map/translate 'map-prop' to 'myProp'?

Upvotes: 0

Views: 1087

Answers (2)

Nick
Nick

Reputation: 783

I did some test with the sample a little. Just found that system seems auto convert the name (hyphen separated) inside the [] into camel-case variable name for mapping!

so 

my-prop // can map to [myProp]
my-p-rop // can NOT map to myProp]
my--prop // can NOT map to [myProp], somehow
a-var-name // can map to [aVarName]

but for the sake of code quality, it is really not suggested to use this feature.

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202196

You can use the following:

@Input('my-prop') myProp: any;

to able to use like this in the template:

<comp [my-prop]="someExpression"></comp>

Upvotes: 2

Related Questions