feat: refactor task services to use InjectionToken for dependency injection

Author: aimxnaim

09-services-deep-dive/src/app/tasks/new-task/new-task.component.ts

@@ -1,6 +1,7 @@
-import { Component, ElementRef, viewChild } from '@angular/core';
+import { Component, ElementRef, Inject, viewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { TasksService } from '../tasks.service';
+import { TasksServiceToken } from '../../../main';
 
 @Component({
   selector: 'app-new-task',
@@ -13,7 +14,7 @@ export class NewTaskComponent {
   private formEl = viewChild<ElementRef<HTMLFormElement>>('form');
 
   constructor(
-    private tasksService: TasksService,
+    @Inject(TasksServiceToken) private tasksService: TasksService,
   ) {}
 
   onAddTask(title: string, description: string) {

09-services-deep-dive/src/app/tasks/tasks-list/task-item/task-item.component.ts

@@ -2,7 +2,7 @@ import { Component, computed, inject, input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { Task, TaskStatus } from '../../task.model';
-import { TasksService } from '../../tasks.service';
+import { TasksServiceToken } from '../../../../main';
 
 @Component({
   selector: 'app-task-item',
@@ -12,7 +12,7 @@ import { TasksService } from '../../tasks.service';
   styleUrl: './task-item.component.css',
 })
 export class TaskItemComponent {
-  private tasksService = inject(TasksService); 
+  private tasksService = inject(TasksServiceToken); 
   task = input.required<Task>();
   taskStatus = computed(() => {
     switch (this.task().status) {

09-services-deep-dive/src/app/tasks/tasks-list/tasks-list.component.ts

@@ -2,6 +2,7 @@ import { Component, computed, inject, signal } from '@angular/core';
 
 import { TaskItemComponent } from './task-item/task-item.component';
 import { TasksService } from '../tasks.service';
+import { TasksServiceToken } from '../../../main';
 
 @Component({
   selector: 'app-tasks-list',
@@ -11,7 +12,7 @@ import { TasksService } from '../tasks.service';
   imports: [TaskItemComponent],
 })
 export class TasksListComponent {
-  private tasksService = inject(TasksService);  
+  private tasksService = inject(TasksServiceToken);  
   selectedFilter = signal<string>('all');
   tasks = computed(() => {
     switch (this.selectedFilter()) {

09-services-deep-dive/src/main.ts

@@ -4,7 +4,7 @@ import { AppComponent } from './app/app.component';
 import { TasksService } from './app/tasks/tasks.service';
 import { InjectionToken } from '@angular/core';
 
-const TasksServiceToken = new InjectionToken('task-service-token')
+export const TasksServiceToken = new InjectionToken<TasksService>('task-service-token')
 
 bootstrapApplication(AppComponent, {
     providers: [{