Search code examples
angularjsangularjs-components

Component not accepting camelCase names

My issue here lie with me trying to make a navbar component, some data must be shared from the main page to the component, and while spending a few hours researching into how to use components, i can find nowhere that can explain why i cant use camelCase variable names to bind data.

Can anyone point me to a resource to explain this to me, or better yet is there a way to use camelCase to bind data, it will make my code an easier read for the team;giving me a more diverse range of names for data.

SAMPLE CODE: HTML

<navbar-component theme="newux" class="screenOnly" title='projData'
                  titleId='vm.titleData' data='{{vm.project.id}}'>
</navbar-component>

COMPONENT

  bindings: {
    theme: "@",
    title:"@",
    titleId:"<",
    data:"@"
  }
Solution

  • When you have a binding to a camel-cased property, you have to use a dash when setting it through an attribute. e.g.:

    <navbar-component theme="newux" 
                  class="screenOnly" 
                  title='projData' 
                  title-id='vm.titleData' 
                  data='{{vm.project.id}}'>
</navbar-component>