Bindable property on component not working

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

// app.html
<import from="./session-step.html"></import>
<session-step test.bind="test"></session-step>

What renders:

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?

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';

export class SessionStep {
  @bindable test = '';

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

When I look at:

I see:
<bindable property=“loading”>

1 Like

Oh weird. The example Todo App is using name
That example works for me.

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";

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

1 Like