Angular2 Inline editing using ngModel and ngFor
<p>I'm trying to implement inline editing using ngModel in Angular2. I have an array which needs to be iterated using ngFor and also uses ngModel. When i try to apply inline editing for this array, i can only edit one character for each of the array's variables.</p>

<p>You can find a working example <a href="https://plnkr.co/edit/7SSpZDec2N2zjrSUM04X?p=preview" rel="nofollow noreferrer">here</a>.</p>

<p>Here's the code for the component where i'm using ngModel and ngFor together:</p>

<pre><code>import {Component} from '@angular/core'
import {InlineEditComponent} from './inline.component';
@Component({
  selector: 'inline-app',
  providers: [],
  template: `
    &lt;div&gt;
      &lt;h2&gt;Inline Editing with Angular 2&lt;/h2&gt;
      &lt;inline-edit [(ngModel)]="editableText" (onSave)="saveEditable($event)"&gt;&lt;/inline-edit&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;ul style="margin:5px;"&gt;
      &lt;li ngFor #arr [ngForOf]="array" [ngForTrackBy]="customTrackBy"&gt;
      &lt;inline-edit [(ngModel)]="arr" (onSave)="saveEditable($event)"&gt;&lt;/inline-edit&gt;
   &lt;/li&gt;
        // &lt;li style="margin:5px;" *ngFor="let arr of array ; let i=index"&gt;
        //   &lt;inline-edit [(ngModel)]="array[i]" (onSave)="saveEditable($event)"&gt;&lt;/inline-edit&gt;
        // &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  `,
  directives: [InlineEditComponent]
})
export class InlineApp {
customTrackBy(index: number, obj: any): any {
    return index;
  }
  editableText = "Click to edit me!";
  // Save name to the server here.  
  saveEditable(value){
      console.log(value);
  }
  array=['bmw','benz','honda'];
}
</code></pre>

<p>If anyone could help me, it would be great.</p>