Angular 2 - 2 Way Binding with NgModel in NgFor
angular, typescript
Solution
After digging around I need to use trackBy on ngFor. Updated plnkr and code below.
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;
}
}
Problem
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() { } } ```