Search code examples
angulartypescriptproperty-binding

Why isn't my input bound property changing in my angular child component?

I have a parent component with two children.

The parent component has a property which is actually a dictonary like this:

dict = {a: 0, b: 0, c: 0};

I do input binding so that both of the child components can have access to dict.

<app-child-a [dict]="dict"></app-child-a>
<app-child-b [dict]="dict"></app-child-b>

Child A changes a property of dict

@Input() dict: any;

someFunctionInChildA() {
  this.dict.b = 1;
}

I can verify that the Parent component knows about this change.

ngAfterInit() {
  setInterval(() => console.log(this.dict), 1000);
}

This prints 0s until someFunctionInChildA is triggered after which it prints 1s.

Here's my problem: child B doesn't seem to see the change. Here's some code from child B

@Input() dict: any;

ngAfterInit() {
  setInterval(() => console.log(this.dict), 1000);
}

This prints 0s all the time, even after someFunctionInChildA has been triggered.

Do I not understand how property binding works? Or is it more likely that I have a silly or unrelated bug elsewhere?

Solution

  • I've figured this one out, and I doubt anyone else will find this useful as it's a rare thing to happen...

    A couple of days ago I actually made a service which would save and update dict into Firebase, and this would sync up with my components via rxjs. But I left some of the old logic behind (that is, the logic whereby dict was being managed by the component rather than the service).

    I will mark this as the correct answer, but the real credit goes to @bryan06 for his good explanation of the correct pattern for this sort of application.