Angular Signals and Computed Properties

I am having a hard time wrapping my head around the concept of Signals and Computed Properties. I have some dummy data, dummyTasks, that is a simple array of task objects, and a selectedUserTasks property that represents the tasks of a selected user. So, I just don't understand how my code works when I make dummyTasks a signal. When I leave it as a simple property-binding value, deleting a task doesn't work. I would like to know why. All answers are appreciated. Thanks. Here is my code:

export class TasksComponent {
selectedUser = input<User>()
selectedUserId = input.required<string>()
selectedUserTasks = computed(() => (
this.dummyTasks.filter((task) => this.selectedUserId() === task.userId)
))

dummyTasks = [
{
id: 't1',
userId: 'u1',
title: 'Master Angular',
summary:
'Learn all the basic and advanced features of Angular & how to apply them.',
dueDate: '2025-12-31',
},
{
id: 't2',
userId: 'u3',
title: 'Build first prototype',
summary: 'Build a first prototype of the online shop website',
dueDate: '2024-05-31',
},
{
id: 't3',
userId: 'u3',
title: 'Prepare issue template',
summary:
'Prepare and describe an issue template which will help with project management',
dueDate: '2024-06-15',
},
]

onCompleteTask(id: string) {
this.dummyTasks.set(this.dummyTasks().filter((task) => task.id !== id))
}
}


When I initialize dummyTasks as a basic property-binding property, not as a signal, and deleting a task, or in this case, simply filtering out the task, does not work:

onCompleteTask(id: string) {
this.dummyTasks = this.dummyTasks.filter((task) => task.id !== id)
}

Continue reading...