Mohammad Saad Abdul Rahim Mohammad Saad Abdul Rahim - 13 days ago 5
AngularJS Question

Edit On Click Functionality using Angular 2

I want to edit title and Body of a specific row whenever I click on edit button such that whenever I click on edit it should make my label into input tag. I have tried to use ngif but it is making all the rows editable like this. Anyone can help what am i doing wrong?

My Running Project

Typescript Code:

<tr *ngFor = "let task of tasklist.task">


<td>{{task.id}}</td>
<td *ngIf="Display == true">{{task.title}}</td>
<td *ngIf="Display == true">{{task.author}}</td>


<td *ngIf="Display == false"> <input placeholder = 'Username'></td>
<td *ngIf="Display == false"> <input placeholder = 'Title'></td>


<td>
<a class="btn btn-Danger" (click) = Temp() > Edit </a>
<a class="btn btn-Danger" (click) = Delete(task) > Delete </a>
</td>

</tr>

<tr>

<td><input placeholder = 'ID' [(ngModel)] = 'newTaskid' ></td>
<td><input placeholder = 'Username' [(ngModel)] = 'newTasktitle' ></td>
<td><input placeholder = 'Title' [(ngModel)] = 'newTaskauthor' ></td>
<td> <Button class="btn btn-link" (click) = Edit(newTaskid,newTasktitle,newTaskauthor)> Save </Button> </td>

</tr>

</table>

</div>

`
})

export class TasksComponent implements OnInit {

sample:string = ""
Display:boolean = true;

constructor(public tasklist: TaskService , private router: Router) { }

ngOnInit() {

this.tasklist.getItems();

}

Delete(value)
{
this.tasklist.delete(value);
}

OnClick(id,title,author)
{
this.tasklist.postitems(id,title,author);
}

Edit(newTaskid,newTasktitle,newTaskauthor)
{
debugger;
this.tasklist.putItems(newTaskid,newTasktitle,newTaskauthor);
}

Temp()
{
this.Display = false;
}
}

Answer
export class TasksComponent implements OnInit {

  displayRow:number = 0;

  Temp(idx) {
    this.displayRow = idx;
  }
<tr *ngFor = "let task of tasklist.task let idx=index">


    <td>{{task.id}}</td>
    <td *ngIf="displayRow != idx">{{task.title}}</td> 
    <td *ngIf="displayRow != idx">{{task.author}}</td>


    <td *ngIf="displayRow == idx"> <input placeholder = 'Username'></td>
    <td *ngIf="Display == idx"> <input placeholder = 'Title'></td>


    <td>
    <a class="btn btn-Danger" (click) = Temp(idx) > Edit </a> 
    <a class="btn btn-Danger" (click) = Delete(task) > Delete </a>
     </td>

  </tr>

  <tr>

  <td><input placeholder = 'ID' [(ngModel)] = 'newTaskid'  ></td>
  <td><input placeholder = 'Username' [(ngModel)] = 'newTasktitle' ></td>
  <td><input placeholder = 'Title' [(ngModel)] = 'newTaskauthor' ></td>
  <td> <Button class="btn btn-link" (click) = Edit(newTaskid,newTasktitle,newTaskauthor)> Save </Button> </td>

  </tr>

 </table>

</div>
Comments