Using dependency injection inside new-task.component.

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

@@ -1,6 +1,7 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, EventEmitter, inject, Input, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {NewTaskData} from '../task/task.model';
+import {TasksService} from '../tasks.service';
 
 @Component({
   selector: 'app-new-task',
@@ -11,22 +12,28 @@ import {NewTaskData} from '../task/task.model';
   styleUrl: './new-task.component.css'
 })
 export class NewTaskComponent {
-  @Output() cancel = new EventEmitter<void>();
-  @Output() add = new EventEmitter<NewTaskData>();
+  @Input({required: true}) userId!: string;
+  @Output() close = new EventEmitter<void>();
+
   enteredTitle = '';
   enteredSummary = '';
   enteredDate = '';
 
+  tasksService = inject(TasksService);
+
   onCancel() {
-    this.cancel.emit();
+    this.close.emit();
   }
 
   onSubmit() {
-    let taskContent: NewTaskData = {
+    let taskData: NewTaskData = {
       title: this.enteredTitle,
       summary: this.enteredSummary,
       date: this.enteredDate,
     };
-    this.add.emit(taskContent);
+
+    this.tasksService.addTaskFor(this.userId, taskData);
+
+    this.close.emit()
   }
 }

src/app/tasks/tasks.component.html

@@ -1,7 +1,7 @@
 @if (isAddingTask) {
   <app-new-task
-    (cancel)="onCancelAddTask()"
-    (add)="onAddTask($event)"
+    [userId]="user.id"
+    (close)="onCloseAddTask()"
   />
 }
 

src/app/tasks/tasks.component.ts

@@ -29,12 +29,7 @@ export class TasksComponent {
     this.isAddingTask = true;
   }
 
-  onCancelAddTask() {
+  onCloseAddTask() {
     this.isAddingTask = false;
   }
-
-  onAddTask(taskData: NewTaskData) {
-    this.tasksService.addTaskFor(this.user.id, taskData);
-    this.onCancelAddTask()
-  }
 }