I have been working on a project to create a task management system. The project consists of two main components: itemList and item. The itemList component takes input values for tasks and displays them in the item component.
https://i.sstatic.net/SaRNMm.png
https://i.sstatic.net/RieTHm.png
The itemList component contains an array of objects with checkboxes. My goal is to implement a button filter on this list based on the checkbox selection. When the "Display checked" button is clicked, only the items that are checked should be displayed in the list.
Here is the link to the StackBlitz code snippet: View code here
Below are snippets of the code I have tried:
item-component.html
<div class="listContainer">
<div
class="checkContainer"
[style.backgroundColor]="IsChecked ? 'grey' : '#ff6165'"
>
<div>
<mat-checkbox
color="secondary"
[(ngModel)]="IsChecked"
(change)="onChange($event, value.task)"
></mat-checkbox>
</div>
</div>
...
item-list.component.ts
public arrayChecked: TaskType[] = [];
addCheckedTask($event: any, data: any): void {
this.arrayChecked.push($event);
console.log('the task is added', this.arrayChecked);
}
displaylist(){
const selectList$ = this.arrayChecked.map((checked, index) => checked ?
this.arrayChecked[index] : null).filter(value => value !== null);
console.log("DisplayChecked",selectList$);
}
removeCheckedTask($event:any, data:any){
const index = this.arrayChecked.findIndex(list => list.task);
this.arrayChecked.splice(index, 1);
console.log(this.arrayChecked);
}
...
If you would like further assistance with displaying only the checked items in the list when the button is clicked, please refer to the provided StackBlitz link. Thank you!