Bindable properties on component do not work

[frankalee]

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

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

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…

[mroeling]

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!

[frankalee]

Edited.
Thanks for the response.

[dnkm]

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>

[mroeling]

I agree, see documentation here, in the first remark: Attribute binding | The Aurelia 2 Docs

[frankalee]

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
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.

[Esger]

.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.