-1

I am building a sample To Do list application in Angular 11 in which I have created bootstrap table and displaying the data in the table on clicking the add button. In table i have the data which gets added along with the icons for delete, edit,save after editing and checkbox for strike through.

Problem: The main problem is that although the delete is working is fine , but when i click on edit all the rows gets affected and when i click on checkbox it does not strike through the text as it as should.

Below are the code files for better understanding

app.component.html

<div>
  <div class = "row" style = "margin-top:5px;margin-left: 10px;">
    <div class = "col-sm-8">
      <input #taskDetails [(ngModel)] = "name" class = "form-control" placeholder = "Enter task" type = "text">
    </div>
    <div class = "col-sm-4">
      <button (click) = "addTask(taskDetails.value)" class = "btn btn-primary">Add</button>
    </div>
  </div>
</div>
<table class = "table">
  <thead>
  <tr>
    <th scope = "col">List of Task</th>
    <th scope = "col">Action</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor = "let task of taskArray;index as i;">
    <td>
      <div class = "row">
        <div class = "col-xs-9">
          <input [readOnly] = "isEditClicked" class = "form-control input-data" name = "{{task}}" type = "text" value = "{{task}}" #update>
        </div>

      </div>
    </td>
    <td>
      <div class = "row">
        <div class = "col-sm-3">
          <svg (click) = "deleteData(task,i)" class = "bi bi-trash" fill = "currentColor" height = "16"
               viewBox = "0 0 16 16"
               width = "16" xmlns = "http://www.w3.org/2000/svg">
            <path
              d = "M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
            <path d = "M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"
                  fill-rule = "evenodd"/>
          </svg>
        </div>
        <div *ngIf = "isEditClicked == false" class = "col-sm-3">
          <svg (click) = "completeTask(task,i, update.value)" class = "bi bi-check" fill = "currentColor" height = "16"
               viewBox = "0 0 16 16"
               width = "16" xmlns = "http://www.w3.org/2000/svg">
            <path
              d = "M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
          </svg>
        </div>
        <div class = "col-sm-3">
          <svg (click) = "editData(task,i)" class = "bi bi-pencil" fill = "currentColor" height = "16"
               viewBox = "0 0 16 16"
               width = "16" xmlns = "http://www.w3.org/2000/svg">
            <path
              d = "M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
          </svg>
        </div>
        <div class="col-sm-3" *ngIf = "isEditClicked == true">
          <input type = "checkbox" (click)="isChecked(task,i,$event)">
        </div>
      </div>
    </td>
  </tr>
  </tbody>
</table>

app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'TO-DO-App';
  taskArray: any = [];
  name = '';
  isEditClicked: boolean = true;
  position = 0;
  isCheck: boolean = false;
  updateValue = '';
  pos: any;
  isPresent:boolean = false;

  constructor() {
  }

  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }

  editData(taskData: any, index: any): void {
    this.isEditClicked = !this.isEditClicked;
    this.position = index;
    this.updateValue = taskData;
    this.pos = index;
  }

  deleteData(taskData: any, i: any): void {
    console.log(taskData);
    this.taskArray.pop(taskData);
    console.log(this.taskArray);
  }

  completeTask(taskData: any, i: any, update: string): void {
    console.log(taskData, i, update);
    this.taskArray.splice(i,1,update);
    console.log(this.taskArray);
    /*this.isEditClicked = false;*/
    this.isEditClicked = !this.isEditClicked;
    /*this.pos = taskData+i;*/
  }

  addTask(task: any): void {
    debugger;
    if(this.taskArray.length == 0 && task!== ''){
      this.taskArray.push(task);
      this.name = '';
      console.log(this.taskArray);
    }
    else{
      debugger;
      if(this.taskArray.length !== 0 && task!== ''){
        for(var i = 0;i <this.taskArray.length; i++){
          if(this.taskArray[i] == task){
            this.isPresent = true;
            /*DO NOTHING*/
          }
          else{
            this.isPresent = false;
          }
        }
        if(this.isPresent == false){
          this.taskArray.push(task);
          this.name = '';
          console.log(this.taskArray);
        }
        else{
          this.name = '';
          /*DO NOTHING*/
        }
      }
      else{

      }

    }


  }

  isChecked(task: any, i: any, $event: any): void {
    this.isCheck = !this.isCheck;
    this.pos = i;
    console.log(task,i,this.isCheck);
    console.log($event);

  }
}

Adding Items

Editing single affects all rows

Strike through not working

any solution please ?

3 Answers 3

0

I think you can do it this way

  1. Initialize an empty array e.g "arrayEditIds"
  2. On click of edit push the id of that particular row object in the array.
  3. Then in table row put up a check to see if the current row id is in the array then show input fields to edit the value. Else show the labels
  4. And when user cancels or done woth the edit then remove this row id from the array. It will hide the inputs and show labels.
0
    deleteData(taskData: any, i: any): void {
console.log(taskData);
this.taskArray.pop(taskData);
console.log(this.taskArray);}

In the above function, .pop func only removes the last element not the one that you provided in the arguements

For edit it is because you are using a single variable

<div *ngIf = "isEditClicked == false" class = "col-sm-3">

"isEditClicked" for all the rows that's why all are getting affected in UI.

0

All the rows are affected when you click edit because you are not using a unique value for isEditClicked so its affecting all the rows. You can change this by providing a unique value to isEditClicked i.e assign the index value like this

editData(taskData: any, index: any): void {
    if(this.isEditClicked==null){
    this.isEditClicked = index;
    }else{
     this.isEditClicked = null;
}    
  }

And in your html do this

<div [readOnly] = "isEditClicked != i" class = "col-sm-3">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.