title: Angular2 Inline editing using ngModel and ngFor
body: <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>