Binding a property between two componets

Hi all,

i’m writing a page made with two components:
a page display a list of areas.

1)area-loader: it’s a container that loads “areas”
2)area-component: it’s the component that show the single area.

The problem is that “areaSelected” property of area-component it’s not updated every time that the user select an area in the list so I can’t do my things.

I tryied to put “@observable” o “@bindable” or some other properties but i can’t find a good way to work.

The simplest solution is to not use the “area-component” but I put the code all togheter… this works but I don’t like.

I created this but I have also a compile error =(

1 Like

I noticed a few mistakes, but the most obvious one would be using TypeScript on Aurelia Script template. Aurelia script template is supposed to support normal, plain JavaScript only. If you wanna use TypeScript, here is an example, with the components you created

Note that in your sandbox, you created components without - in their names, such as arealoader instead of area-loader, it will cause issues so I fixed that.