# Bindable properties on component do not work

**URL:** <https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301>\
**Category:** Help Requests\
**Created:** [December 1, 2024, 5:16pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301 "2024-12-01T17:16:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![frankalee](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@frankalee](https://discourse.aurelia.io/u/frankalee)\
**Post date:** [December 1, 2024, 5:16pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/1 "2024-12-01T17:16:52Z")

</div>

I’ve simply copied the exact example here :  
TYPESCRIPT:

> import { bindable } from ‘aurelia’;  
> export class NameComponent {  
> @bindable firstName = ‘’;  
> @bindable lastName = ‘’;  
> }  
> HTML:

> Hello ${firstName} ${lastName}. How are you today?

and then insert it into the my-app.html:

> `<name-component firstName.bind='John' lastName.bind='Smith'></name-component>`

Both the properties are simply undefined.

NOTE: I have seen this question and it doesn’t solve my problem whatsoever:

> [@Bindable property on component not working](https://discourse.aurelia.io/t/bindable-property-on-component-not-working/5091):
>
> Hi I’m trying to utilize Components and bindable properties. However, I’m unable to get tit to work. I looked at the documentation and examples by other. Here is what I’m doing: // my component called session-step.html \<bindable name="test"\>\</bindable\> \<div style="height: 30px; width: 200px; color: white; background-color: rgb(54, 54, 54);"\>TEST: ${test}\</div\> // app.ts test: "HELLO COMPONENT"; // app.html \<import from="./session-step.html"\>\</import\> \<session-step test.bind="test"\>\</sessi…

Neither does this one:

> [@Aurelia 2 and @bindable](https://discourse.aurelia.io/t/aurelia-2-and-bindable/5291):
>
> Hi. I’ve got a bindable property in a view-model like this: @bindable tabtexts : any. The view-model is marked as a custom element and in the view using said custom element I have: \<div\> \<my-custom-element tabtexts.bind="subjectAreas"\>\</my-custom-element\> \</div\> where subjectAreas is a property of type Array\<SubjectArea\>which (for demonstration purposes) is initialised in the constructor of the view’s view model. The above set up is similar to how I’ve done this in the past in applicatio…

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [December 1, 2024, 9:10pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/2 "2024-12-01T21:10:40Z")

</div>

Hi, could you please review the code parts that you use in your question? Seems like the text is not escaped properly and therefore not visible. Thanks in advance!

---

<div class="post-metadata">

**Author:** ![frankalee](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@frankalee](https://discourse.aurelia.io/u/frankalee)\
**Post date:** [December 2, 2024, 2:20pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/3 "2024-12-02T14:20:09Z")

</div>

Edited.  
Thanks for the response.

---

<div class="post-metadata">

**Author:** ![dnkm](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dnkm/32/594_2.png) [@dnkm](https://discourse.aurelia.io/u/dnkm)\
**Post date:** [December 2, 2024, 4:15pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/4 "2024-12-02T16:15:22Z")

</div>

Just checking if it’s as simple as changing the bindings? Should they be:

`<name-component first-name.bind='John' last-name.bind='Smith'></name-component>`

---

<div class="post-metadata">

**Author:** ![mroeling](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/mroeling/32/781_2.png) [@mroeling](https://discourse.aurelia.io/u/mroeling)\
**Post date:** [December 3, 2024, 7:06am UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/5 "2024-12-03T07:06:30Z")

</div>

I agree, see documentation here, in the first remark: [Attribute binding | The Aurelia 2 Docs](https://docs.aurelia.io/templates/overview/attribute-binding)

---

<div class="post-metadata">

**Author:** ![frankalee](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@frankalee](https://discourse.aurelia.io/u/frankalee)\
**Post date:** [December 3, 2024, 9:34am UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/6 "2024-12-03T09:34:30Z")

</div>

Thanks for the response, it got me in the right direction!  
I was/am referring to passing in bindable property values into components as on this page:  
[https://docs.aurelia.io/components/bindable-properties](https://docs.aurelia.io/components/bindable-properties)  
Using the given syntax now works as in :  
`<drop-down key-value="id" display-member="description" list-of-values.bind="someArray"></drop-down>`  
I struggled to get the value of the list-of-values right. I got this error when the aurelia system was trying to create the` <select>` element using the repeat.for statement:  
`<option repeat.for="item of listOfValues"`  
ERROR:  
` Uncaught (in promise) Error: AUR0777: Unsupported: [repeat] cannot iterate over [object String]`

The answer is that to pass a simple string value one uses the syntax without the .bind but when passing a variable inside the model using the component one has to use the .bind syntax.  
So my component is then declared as follows:  
`<drop-down key-member="rnisDmcCode" display-member="fgDmcName" list-of-values.bind="dmcAreas"></drop-down>`  
where the dmcAreas is an array containing objects which has rnisDmcCode as key and fgDmcName as display value.  
Thanks for the support. Much appreciated.

---

<div class="post-metadata">

**Author:** ![Esger](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/esger/32/327_2.png) [@Esger](https://discourse.aurelia.io/u/Esger)\
**Post date:** [December 6, 2024, 10:55pm UTC](https://discourse.aurelia.io/t/bindable-properties-on-component-do-not-work/6301/7 "2024-12-06T22:55:46Z")

</div>

.bind expects a property. So `<name-component first-name.bind='John'>` Means that Aurelia expects a property `John` with a value. So what you needed here is `<name-component first-name.bind = "'John'">` to pass it a string. Or just `<name-component first-name="John">` without .bind it won’t expect a property and you can pass in a string directly.  
And yes, the camelCased bindable `firstName` should be written as kebab-case in the template.