Angular 2 inline editing within an *ngFor loop

Question

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 Inline edit demo (angular 1.0). 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.

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

     <tr *ngFor='let user of userList'>
          <td>
            <input type="checkbox" [(ngModel)]="user.state">
          </td>

          <td>
            {{user.userId}}
          </td>

          <td>
            <input id="userName" type="text" class="form-control" ng-model="user.userName" *ngIf="userEditing" />
            <span *ngIf="!userEditing"> {{user.userName}}</span>
          </td>

          <td>
            <input type="text" class="form-control" ng-model="user.firstName" *ngIf="userEditing" /> 
           <span *ngIf="!userEditing"> {{user.firstName}}</span>
          </td>

          <td>
            <input type="text" class="form-control" ng-model="user.lastName" *ngIf="userEditing" /> 
           <span *ngIf="!userEditing"> {{user.lastName}}</span>
          </td>

            <td>
            <input type="text" class="form-control" ng-model="user.department" *ngIf="userEditing" /> 
           <span *ngIf="!userEditing"> {{user.department}}</span>
          </td>

            <td> <button type="button" [ngClass]="{disabled : !enableButton}" class="btn btn-default" (click)="getUserToEdit($event, user.userId)">{{editUserButtonCaption}}</button>
              <td> <button type="button" class="btn btn-default" (click)="deleteUser(user.userId)">{{deleteUserButtonCaption}}</button></tr>
        <tr>

Answer 1

You are almost there with your code. In your *ngFor loop you are looping over userList. That's good, but you missed one detail. You need to make sure that each user has a property userEditing set to false. In your code you have userEditing as a single variable that changes all the inputs. You want to be changing userEditing only for the user you clicked next to.

These lines:

<td>
  <input type="text" class="form-control" ng-model="user.department" *ngIf="userEditing" /> 
  <span *ngIf="!userEditing"> {{user.department}}</span>
</td>

should read

<td>
  <input type="text" class="form-control" ng-model="user.department" *ngIf="user.userEditing" /> 
  <span *ngIf="!user.userEditing"> {{user.department}}</span>
</td>

Then in getUserToEdit($event, user.userId) function you need to change userEditing boolean to true, toggling the text with input for the specific user.

getUserToEdit($event, user.userId){
  const userIndex = _.findIndex(this.users, {userId: user.userId});
  this.users[userIndex].userEditing = true;
}

_.findIndex is a utility function from lodash - functional paradigm library which offers many higher order functions allowing you to write in a more concise, more abstract way. Do yourself a favour and start using it.

I would probably change userId and userEditing to just id and editing - they are already property of user object - make it easier on yours and your colleagues' eyes when reading the code.