0

When I give camel cased attributes to my element, they dont work. No error or warning. But when I pass all lowercased attribute, they work well. Can someone explain this behaviour?

My index.html:

<body>
  <app-root></app-root>
  <user-poll age="25" personName="John doe"></user-poll>//an angular element
</body>

user-poll.component.ts

@Input() a: number;//=25, works well
@Input() personName: string;//always undefined
dasfdsa
  • 7,102
  • 8
  • 51
  • 93
  • try putting single quotes inside the double quotes e.g. personName=" 'John doe ' " (without the spaces I added here) – Mathias Mar 09 '19 at 14:42
  • When I pass a sting as an input parameter I do this [whatClass]="'settings'" - there is a single quote inside the double – Mathias Mar 09 '19 at 14:48
  • in webcomponents, you can't use [] like you did in [whatClass] – dasfdsa Mar 09 '19 at 14:51

1 Answers1

3

All camelcase attribute will be delimited with -. From the docs:

...for a component with @Input('myInputProp') inputProp, the corresponding custom element defines an attribute my-input-prop.

dasfdsa
  • 7,102
  • 8
  • 51
  • 93