Angular2 change in parent not reflected in child when using array input property

Question

Say we have component A as the parent component and component B as the child component. The child has an input what_is_x that is supplied by the parent. Something like this:

For the parent:

@Component({
  selector: 'cmp-A',
  directives: [ComponentB],
  template: `<cmp-B [what-is-x]="x"></cmp-B>`
})
export ComponentA {
  public x: any = [1, 2, 3];
  constructor() {
    setTimeout(() => this.x.push(10), 2000);
  }
}

For the child:

// component B with input what_is_x
@Component({
  selector: 'cmp-B',
  template: `{{what_is_x}}`
})
export ComponentB {
  @Input('what-is-x') public what_is_x: any;
}

My question is, if the parent changed x by some means, does the child get updated with the new value? According to the "Component communication" chapter in the developer guide (not released yet); it should! but it's not updated for me, tried all betas up till now (0,1,2)

Thanks, the plnkr you provided works. But what about this plnkr. Appending values to the array is not reflected as you can see. — abdulhaq-e
– abdulhaq-e, Commented Jan 30, 2016 at 3:13
The problem is that push doesn't return a new array. The Input will be updated when the change detector that the value bound to it has a new reference. See this plnkr using concat that returns a new array, therefore a new reference. — Eric Martinez
– Eric Martinez, Commented Jan 30, 2016 at 3:37
What @EricMartinez said. Often, we have templates more like this in ComponentB: <div *ngFor="#item of what_is_x">{{item}}</div>. This works (using the same array reference) because bindings are created for each element of the array, so change detection will notice if an item is added or removed from the array, with, e.g., push(). — Mark Rajcok
– Mark Rajcok, Commented Jan 30, 2016 at 3:41
@EricMartinez Thanks a lot, please submit it as an answer and perhaps include Mark's comment as well. — abdulhaq-e
– abdulhaq-e, Commented Jan 30, 2016 at 6:07

Community · Accepted Answer · 2017-05-23 12:09:51Z

Update: As of beta.16, {{what_is_x}} will now update in the view, even if the array reference hasn't changed. See also {{myArray}} now updates in the view as of beta.16.

Original answer:

The default change detection algorithm looks for differences by comparing bound-property values by reference across change detection runs. -- doCheck() API doc

So as @Eric mentioned in a comment, the reason you are not seeing any updates in your view is because you are only binding to the array in your template – {{what_is_x}} – and since the array reference does not change when we modify the array (e.g., using push()), change detection does not detect any changes.

If this is really your use case, do as @Eric suggests and return a different array, then change detection will notice that the array reference has changed.

Normally, our templates bind to individual items of the array. E.g.,

<div *ngFor="#item of what_is_x">{{item}}</div>

Since there is a binding created for each item of the array, if we add or remove or modify an item, change detection will notice (and we do not need to return a different array).

For debugging, if you instead use {{what_is_x | json}}, you'll also see the view update when the array changes. (This is because the JsonPipe is stateful, which causes Angular change detection to evaluate it every change detection cycle.)

Collectives™ on Stack Overflow

Angular2 change in parent not reflected in child when using array input property

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related