Bindable property on component not working

Help Requests
1

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"></session-step>

What renders:
image

For what is worth I go the Todo sample app working form teh Aurelia 2 docs. However my setup is different.
I have:
Electron + TypeScript + Webpack

What do I miss here?

2

I think you’re looking for this one. Bindable ‘test’ is defined in the view-model of session-step (so session-step.ts), not in the view itself.

In your case:

import { bindable, customElement } from 'aurelia';

@customElement('session-step')
export class SessionStep {
  @bindable test = '';
}
3

I’m using HTML only component here. See Component basics - The Aurelia 2 Docs

But I also tried to do it with the ViewModel approach you described. Without luck.

1 Like
4

When I look at:

I see:
<bindable property=“loading”>

1 Like
5

Oh weird. The example Todo App is using namehttps://docs.aurelia.io/tutorials/building-a-todo-application#create-the-todo-item-component-using-html-only
That example works for me.

6

I tried it with a fresh Aurelia 2 installation. It worked for me using
<bindable name="test"></bindable>

Reading back, I notice the definition of test in app.ts. Perhaps that’s the reason? It is now a type, but not a value.
public test = "HELLO COMPONENT";

7

No dice for me. I will try to put a simple repro together.

1 Like