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’?

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You can use the following:

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

to able to use like this in the template:

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

Jason
Guest

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.