Adding 'Add Task' feature. Create a task-content model for better understanding.

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

@@ -1,24 +1,24 @@
 <div class="backdrop" (click)="onCancel()"></div>
 <dialog open>
   <h2>Add Task</h2>
-  <form>
+  <form (ngSubmit)="onSubmit()">
     <p>
       <label for="title">Title</label>
-      <input type="text" id="title" name="title" />
+      <input type="text" id="title" name="title" [(ngModel)]="enteredTitle" />
     </p>
 
     <p>
       <label for="summary">Summary</label>
-      <textarea id="summary" rows="5" name="summary"></textarea>
+      <textarea id="summary" rows="5" name="summary" [(ngModel)]="enteredSummary"></textarea>
     </p>
 
     <p>
       <label for="due-date">Due Date</label>
-      <input type="date" id="due-date" name="due-date" />
+      <input type="date" id="due-date" name="due-date" [(ngModel)]="enteredDate" />
     </p>
 
     <p class="actions">
-      <button type="button" (click)="onCancel()" >Cancel</button>
+      <button type="button" (click)="onCancel()">Cancel</button>
       <button type="submit">Create</button>
     </p>
   </form>

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

@@ -1,15 +1,33 @@
 import {Component, EventEmitter, Output} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {Task} from '../../task/task.model';
+import {TaskContent} from './task-content.model';
 
 @Component({
   selector: 'app-new-task',
-  imports: [],
+  imports: [
+    FormsModule
+  ],
   templateUrl: './new-task.component.html',
   styleUrl: './new-task.component.css'
 })
 export class NewTaskComponent {
   @Output() cancel = new EventEmitter<void>();
+  @Output() add = new EventEmitter<TaskContent>();
+  enteredTitle = '';
+  enteredSummary = '';
+  enteredDate = '';
 
   onCancel() {
     this.cancel.emit();
   }
+
+  onSubmit() {
+    let taskContent: TaskContent = {
+      title: this.enteredTitle,
+      summary: this.enteredSummary,
+      date: this.enteredDate,
+    };
+    this.add.emit(taskContent);
+  }
 }

src/app/tasks/new-task/task-content.model.ts

@@ -0,0 +1,5 @@
+export interface TaskContent {
+  title: string;
+  summary: string;
+  date: string;
+}

src/app/tasks/tasks.component.html

@@ -1,5 +1,8 @@
 @if (isAddingTask) {
-  <app-new-task (cancel)="onCancelAddTask()" />
+  <app-new-task
+    (cancel)="onCancelAddTask()"
+    (add)="onAddTask($event)"
+  />
 }
 
 <section id="tasks">

src/app/tasks/tasks.component.ts

@@ -3,6 +3,7 @@ import {User} from '../user/user.model';
 import {Task} from '../task/task.model';
 import {TaskComponent} from '../task/task.component';
 import {NewTaskComponent} from './new-task/new-task.component';
+import {TaskContent} from './new-task/task-content.model';
 
 @Component({
   selector: 'app-tasks',
@@ -54,4 +55,20 @@ export class TasksComponent {
   onCancelAddTask() {
     this.isAddingTask = false;
   }
+
+  onAddTask(taskContent: TaskContent) {
+    let nextTaskId = this.tasks.length + 1;
+    let taskId = 't' + (nextTaskId).toString();
+
+    let task: Task = {
+      id: taskId,
+      userId: this.user.id,
+      title: taskContent.title,
+      summary: taskContent.summary,
+      dueDate: taskContent.date,
+    };
+    this.tasks.push(task);
+
+    this.onCancelAddTask()
+  }
 }