Angular 2 - 2 Way Binding with NgModel in NgFor

Question

In Angular 2 how would I get 2 way binding with NgModel within a repeating list using NgFor. Below is my plunkr and code but I get an error.

Plunkr

@Component({   selector: 'my-app',   template: `   <div>     <div *ngFor="let item of toDos;let index = index;">       <input [(ngModel)]="item" placeholder="item">     </div>     Below Should be binded to above input box     <div *ngFor="let item of toDos">       <label>{{item}}</label>     </div>   </div>   `,   directives: [MdButton, MdInput] }) export class AppComponent {    toDos: string[] =["Todo1","Todo2","Todo3"];   constructor() {}   ngOnInit() {   } } 

Answer 1

After digging around I need to use trackBy on ngFor. Updated plnkr and code below. Hope this helps others.

Working Plnkr

@Component({   selector: 'my-app',   template: `   <div>     <div *ngFor="let item of toDos;let index = index;trackBy:trackByIndex;">       <input [(ngModel)]="toDos[index]" placeholder="item">     </div>     Below Should be binded to above input box     <div *ngFor="let item of toDos">       <label>{{item}}</label>     </div>   </div>   `,   directives: [MdButton, MdInput] }) export class AppComponent {    toDos: string[] =["Todo1","Todo2","Todo3"];   constructor() {}   ngOnInit() {   }   trackByIndex(index: number, obj: any): any {     return index;   } }