Binding a property between two componets

Help Requests
1

Hi all,

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

image
image.png1218×281 17.7 KB

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.

image
image.png1194×175 13.9 KB

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
2

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 https://codesandbox.io/s/aurelia-typescript-sandbox-459pc

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.

3 Likes