Angular: [(ngModel)] can't bind to array elements (foo[0])

Created on 6 Jan 2016  ·  3Comments  ·  Source: angular/angular

<input type="text" [(ngModel)]="values[0]"> won't update model on input's value change:

Plunker: http://plnkr.co/edit/HOdOeLTwYzyNke3DTWOl?p=preview

Most helpful comment

Change

<input type="text" [(ngModel)]="values[0]"> => {{values}}

to

<input type="text" [(ngModel)]="values[0]"> => {{values[0]}}

Looks like Angular 2 won't bind to an array in its interpolation, just elements within the array. The DOM updates only when bound properties change. My guess is that putting a plain array {{values}} in the template doesn't trigger change detection. Imagine an array with thousands of objects. Changing any one of those objects could trigger change detection which would be bad for performance.

All 3 comments

Change

<input type="text" [(ngModel)]="values[0]"> => {{values}}

to

<input type="text" [(ngModel)]="values[0]"> => {{values[0]}}

Looks like Angular 2 won't bind to an array in its interpolation, just elements within the array. The DOM updates only when bound properties change. My guess is that putting a plain array {{values}} in the template doesn't trigger change detection. Imagine an array with thousands of objects. Changing any one of those objects could trigger change detection which would be bad for performance.

Wooooppppps, you are totally right @pe8ter, thank you! I've jumped to (wrong) conclussions. Thnx again.

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings