Adding add task functionnality: without personalisation right now.

src/app/tasks/tasks.component.html

@@ -2,7 +2,7 @@
   <header>
     <h2>{{ user.name }}'s Tasks</h2>
     <menu>
-      <button>Add Task</button>
+      <button (click)="onAddTask()">Add Task</button>
     </menu>
   </header>
 
@@ -12,7 +12,7 @@
         <li>
           <app-task
             [task]="task"
-            (complete)="onDeleteTask($event)"
+            (complete)="onCompleteTask($event)"
           />
         </li>
       }

src/app/tasks/tasks.component.ts

@@ -17,8 +17,7 @@ export class TasksComponent {
       id: 't1',
       userId: 'u1',
       title: 'Master Angular',
-      summary:
-        'Learn all the basic and advanced features of Angular & how to apply them.',
+      summary: 'Learn all the basic and advanced features of Angular & how to apply them.',
       dueDate: '2025-12-31',
     },
     {
@@ -32,8 +31,7 @@ export class TasksComponent {
       id: 't3',
       userId: 'u3',
       title: 'Prepare issue template',
-      summary:
-        'Prepare and describe an issue template which will help with project management',
+      summary: 'Prepare and describe an issue template which will help with project management',
       dueDate: '2024-06-15',
     },
   ];
@@ -42,7 +40,22 @@ export class TasksComponent {
     return this.tasks.filter((task) => task.userId === this.user.id);
   }
 
-  onDeleteTask(taskId: string) {
+  onAddTask() {
+    let taskNumber = this.tasks.length + 2;
+    let taskId = 't' + (taskNumber).toString();
+
+    let newTask: Task = {
+      id: taskId,
+      userId: this.user.id,
+      title: 'New task for ' + this.user.name,
+      summary: 'Summary',
+      dueDate: '2025-12-31',
+    };
+
+    this.tasks.push(newTask);
+  }
+
+  onCompleteTask(taskId: string) {
     this.tasks = this.tasks.filter((task) => task.id !== taskId);
   }
 }