todo.component.ts

// updated
// src/app/components/todo/todo.component.ts

import { Component, OnInit } from '@angular/core';
import { TodoService } from '../../services/todo.service';
import { Signal } from '@angular/core'; // import Signal
import { TodoList } from '../../models/todo.model';

@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
todoList$: Signal<TodoList>; // signal of todo list

constructor(private todoService: TodoService) {}

ngOnInit(): void {
this.todoList$ = this.todoService.getTodoList(); // get the todo list from the service
}

// toggle the completion status of a todo item
async toggleCompleted(id: number): Promise<void> {
// find the todo item by id
const todoItem = this.todoList$.value.find(todo => todo.id === id); // use value property to access the current value of the signal

// update the todo item on the service
await this.todoService.updateTodoItem(id, !todoItem.completed); // use async/await syntax to handle the asynchronous operation
}
}