Dependency Injection : Extracting tasks management system into tasks.service file. Using @Injectable to automatically instanciate our TasksComponent with the TasksService.

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

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {NewTaskData} from '../../task/task.model';
+import {NewTaskData} from '../task/task.model';
 
 @Component({
   selector: 'app-new-task',

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

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import { Task } from './task.model';
-import {CardComponent} from '../shared/card/card.component';
+import {Task} from './task.model';
+import {CardComponent} from '../../shared/card/card.component';
 import {DatePipe} from '@angular/common';
 
 @Component({

src/app/tasks/tasks.component.ts

@@ -1,8 +1,9 @@
-import {Component, EventEmitter, Input, Output} 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 {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';
 
 @Component({
   selector: 'app-tasks',
@@ -12,39 +13,16 @@ import {NewTaskComponent} from './new-task/new-task.component';
 })
 export class TasksComponent {
   @Input({ required: true }) user!: User;
-
   isAddingTask = false;
 
-  tasks: Task[] = [
-    {
-      id: 't1',
-      userId: 'u1',
-      title: 'Master Angular',
-      summary: 'Learn all the basic and advanced features of Angular & how to apply them.',
-      dueDate: '2025-12-31',
-    },
-    {
-      id: 't2',
-      userId: 'u3',
-      title: 'Build first prototype',
-      summary: 'Build a first prototype of the online shop website',
-      dueDate: '2024-05-31',
-    },
-    {
-      id: 't3',
-      userId: 'u3',
-      title: 'Prepare issue template',
-      summary: 'Prepare and describe an issue template which will help with project management',
-      dueDate: '2024-06-15',
-    },
-  ];
+  constructor(private tasksService: TasksService) {}
 
   get selectedUserTasks() {
-    return this.tasks.filter((task) => task.userId === this.user.id);
+    return this.tasksService.getUserTasks(this.user.id);
   }
 
   onCompleteTask(taskId: string) {
-    this.tasks = this.tasks.filter((task) => task.id !== taskId);
+    this.tasksService.removeTask(taskId);
   }
 
   onStartAddTask() {
@@ -56,17 +34,7 @@ export class TasksComponent {
   }
 
   onAddTask(taskData: NewTaskData) {
-    let nextTaskId = this.tasks.length + 1;
-    let taskId = 't' + (nextTaskId).toString();
-
-    this.tasks.push({
-      id: taskId,
-      userId: this.user.id,
-      title: taskData.title,
-      summary: taskData.summary,
-      dueDate: taskData.date,
-    });
-
+    this.tasksService.addTaskFor(this.user.id, taskData);
     this.onCancelAddTask()
   }
 }

src/app/tasks/tasks.service.ts

@@ -0,0 +1,28 @@
+import type {NewTaskData, Task} from './task/task.model';
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class TasksService {
+  private tasks: Task[] = [];
+
+  getUserTasks(userId: string) {
+    return this.tasks.filter((task) => task.userId === userId);
+  }
+
+  addTaskFor(userId: string, taskData: NewTaskData) {
+    let nextTaskId = this.tasks.length + 1;
+    let taskId = 't' + (nextTaskId).toString();
+
+    this.tasks.push({
+      id: taskId,
+      userId: userId,
+      title: taskData.title,
+      summary: taskData.summary,
+      dueDate: taskData.date,
+    });
+  }
+
+  removeTask(taskId: string) {
+    this.tasks = this.tasks.filter((task) => task.id !== taskId);
+  }
+}