0

I'm currently working with angular dart and I came across a small issue that I can't resolve regarding binding.

I have a main view containing a component which sole purpose is to update an object (Order) and display it's content (list of item). I have a binding from the view to the component for this Order.

The customer is able to modify the order in the view (adding items ..) and when he does I would like my component to received the updated order so it can do what it should.

The problem is that it never receives the updated order.

I created a small AngularDart webapp to reproduce the issue, bear in mind the "Order" object is actually way more complex and the customer can modify lots of data.

https://gist.github.com/gctom57/fed428aa56cb3ae3414e64aae517fe6e

If anyone has an idea for what the problem is and how I could solve it. Thx

using angular:4.0.0
Dart VM version: 1.24.3

Tom
  • 11
  • 4
  • 1
    Where do you update the product? What change do you want to propagate where? – Günter Zöchbauer Apr 12 '18 at 14:14
  • I'm updating the product in my component but to update it I need all the Order information so I want to propagate the whole Order object from the view to my component as soon as the customer did a change on it. – Tom Apr 12 '18 at 14:17
  • "propagate the whole Order object from the view to my component" what is "the view"? – Günter Zöchbauer Apr 12 '18 at 14:19
  • If you look at the gist I want to propagate the Order from **app-component** to **my-component**. The view (app-component) contains the Order information as well as **my-component**. – Tom Apr 12 '18 at 14:23
  • "The view contains the Order information" again ;-) what is "the view". Passing the order from app-component to my-component should work with your current code. – Günter Zöchbauer Apr 12 '18 at 14:25
  • Is the problem that if you execute `order.clientIds.add("1");` that this doesn't update `my-component`? – Günter Zöchbauer Apr 12 '18 at 14:26
  • My bad, the view is the template app-component.html. And yes exactly, I thought that since a property of the order object is modified the whole object would be sent again. – Tom Apr 12 '18 at 14:28
  • Angular only checks object identity and doesn't care about changed properties except when properties are bound to in the view then it checks if they need to be updated. If you would bind to `{{order.clientIds}}` somewhere in a view, then these bindings would change, but otherwise not. – Günter Zöchbauer Apr 12 '18 at 14:31
  • Alright, I didn't knew that. Thanks! – Tom Apr 12 '18 at 14:36
  • I'm not sure what to suggest as workaround. I'm using `build_value` which provides immutable objects and each change results in a new instance which would cause the `@Input()` to be updated. Another way would be a service provided at the parent and injected in the child where a stream emits a new event every time the parent updates the object. The child could inject and subscribe to the stream and get notified this way about the change. Or you could implement `ngDoCheck` in the child and check if something changed in `order`. – Günter Zöchbauer Apr 12 '18 at 14:56
  • 1
    I see, I'm going to try number 2. Thx – Tom Apr 13 '18 at 06:17

1 Answers1

0

As suggested by Günter I created a service containing a Stream that I then inject in the Parent and the Child, the Parent write in the Stream and the Child listen tpo with a Stream object as explained in this other thread. Work fine now. Thx

Tom
  • 11
  • 4