Using Dependency Injection inside task.component instead of using Output for tasks.components.

src/app/tasks/task/task.component.ts

@@ -1,7 +1,8 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
 import {Task} from './task.model';
 import {CardComponent} from '../../shared/card/card.component';
 import {DatePipe} from '@angular/common';
+import {TasksService} from '../tasks.service';
 
 @Component({
   selector: 'app-task',
@@ -14,9 +15,9 @@ import {DatePipe} from '@angular/common';
 })
 export class TaskComponent {
   @Input({ required: true }) task!: Task;
-  @Output() complete = new EventEmitter<string>();
+  tasksService = inject(TasksService);
 
   onCompleteTask() {
-    this.complete.emit(this.task.id);
+    this.tasksService.removeTask(this.task.id);
   }
 }

src/app/tasks/tasks.component.html

@@ -17,10 +17,7 @@
     <ul>
       @for (task of selectedUserTasks; track task.id) {
         <li>
-          <app-task
+          <app-task [task]="task" />
-            [task]="task"
-            (complete)="onCompleteTask($event)"
-          />
         </li>
       }
     </ul>

src/app/tasks/tasks.component.ts

@@ -1,6 +1,5 @@
 import {Component, Input} from '@angular/core';
 import {type User} from '../user/user.model';
-import {type NewTaskData, type Task} from './task/task.model';
 import {TaskComponent} from './task/task.component';
 import {NewTaskComponent} from './new-task/new-task.component';
 import {TasksService} from './tasks.service';
@@ -21,10 +20,6 @@ export class TasksComponent {
     return this.tasksService.getUserTasks(this.user.id);
   }
 
-  onCompleteTask(taskId: string) {
-    this.tasksService.removeTask(taskId);
-  }
-
   onStartAddTask() {
     this.isAddingTask = true;
   }