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);
}
}
any solution please ?