<!-- src/app/components/todo/todo.component.html -->

<h1>Todo List</h1>
<ul>
<li *ngFor="let todo of todoList$ | async"> <!-- use async pipe to subscribe to the observable -->
<input type="checkbox" [checked]="todo.completed" (change)="toggleCompleted(todo.id)"> <!-- use two-way binding and change event to toggle the completion status -->
<span [class.completed]="todo.completed">{{ todo.title }}</span> <!-- use class binding to style the completed items -->
</li>
</ul>