title: Angular 2 inline editing within an *ngFor loop
body: <p>I am trying to find examples or pointers of inline editing for Angular 2. I have found some really nice examples of this in Angular 1, examples like <a href="https://jsfiddle.net/uberspeck/azwstrxu/" rel="nofollow noreferrer">Inline edit demo (angular 1.0)</a>. But I am struggling to find like for like examples for Angular 2. I basically need to achieve to similar results as in this example. I am a complete novice when it comes to Angular 2 (1 or 2) so any help is really appreciated.</p>
  <p>I have included my Html and the idea is that when the button is clicked the userEditing flag is set to true but I only want the selected line to change to an Input element not, which is currently happening, all the lines in the ngfor</p>
  <pre class="lang-html prettyprint-override"><code>     &lt;tr *ngFor='let user of userList'&gt;
            &lt;td&gt;
              &lt;input type=&quot;checkbox&quot; [(ngModel)]=&quot;user.state&quot;&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              {{user.userId}}
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;input id=&quot;userName&quot; type=&quot;text&quot; class=&quot;form-control&quot; ng-model=&quot;user.userName&quot; *ngIf=&quot;userEditing&quot; /&gt;
              &lt;span *ngIf=&quot;!userEditing&quot;&gt; {{user.userName}}&lt;/span&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; ng-model=&quot;user.firstName&quot; *ngIf=&quot;userEditing&quot; /&gt; 
             &lt;span *ngIf=&quot;!userEditing&quot;&gt; {{user.firstName}}&lt;/span&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; ng-model=&quot;user.lastName&quot; *ngIf=&quot;userEditing&quot; /&gt; 
             &lt;span *ngIf=&quot;!userEditing&quot;&gt; {{user.lastName}}&lt;/span&gt;
            &lt;/td&gt;
  
              &lt;td&gt;
              &lt;input type=&quot;text&quot; class=&quot;form-control&quot; ng-model=&quot;user.department&quot; *ngIf=&quot;userEditing&quot; /&gt; 
             &lt;span *ngIf=&quot;!userEditing&quot;&gt; {{user.department}}&lt;/span&gt;
            &lt;/td&gt;
  
              &lt;td&gt; &lt;button type=&quot;button&quot; [ngClass]=&quot;{disabled : !enableButton}&quot; class=&quot;btn btn-default&quot; (click)=&quot;getUserToEdit($event, user.userId)&quot;&gt;{{editUserButtonCaption}}&lt;/button&gt;
                &lt;td&gt; &lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; (click)=&quot;deleteUser(user.userId)&quot;&gt;{{deleteUserButtonCaption}}&lt;/button&gt;&lt;/tr&gt;
          &lt;tr&gt;
  </code></pre>