successfully added delete feature to the task manager

src/app/tasks/tasks-list/task-item/task-item.component.html

@@ -25,6 +25,6 @@ <h3>{{ task().title }}</h3>
     </p>
   </form>
   <p>
-    <button (onclick)="deleteTask()">Delete</button>
+    <button (click)="deleteTask()">Delete</button>
   </p>
 </article>

src/app/tasks/tasks-list/task-item/task-item.component.ts

@@ -54,6 +54,8 @@ export class TaskItemComponent {
   }
 
   deleteTask(): void {
+    console.log(`Task ID to delete: ${this.task().id}`);
+
     this.delete.emit(this.task().id);
   }
 }

src/app/tasks/tasks-list/tasks-list.component.html

@@ -13,7 +13,9 @@ <h2>My Tasks</h2>
 <ul>
   @for (task of tasks(); track task) {
     <li>
-      <app-task-item [task]="task" />
+      <app-task-item [task]="task" (delete)="onDeleteTask($event)"/>
+
     </li>
+
   }
 </ul>

src/app/tasks/tasks-list/tasks-list.component.ts

@@ -1,10 +1,11 @@
 import { Component, computed, inject, signal } from '@angular/core';
 import { TaskItemComponent } from './task-item/task-item.component';
 import { TasksService } from '../task.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-tasks-list',
-  imports: [TaskItemComponent],
+  imports: [CommonModule, TaskItemComponent],
   templateUrl: './tasks-list.component.html',
   styleUrl: './tasks-list.component.css',
 })
@@ -36,6 +37,8 @@ export class TasksListComponent {
   }
 
   onDeleteTask(taskId: string): void {
+    console.log(`Deleting task with ID: ${taskId}`);
+
     this.tasksService.deleteTasks(taskId);
   }
 }