Dependency Injection

Branch

Remove the tasks list from TaskListComponent

The TaskListComponent class is still using its own tasks list. You need it to use the service’s list instead. The first step is to remove the tasks list from the TaskListComponent class.

1. Remove the tasks variable from the src/app/task-list.ts file, and all imports related to it.

    import { Component, WritableSignal, signal } from "@angular/core";
    import { Task } from "./models/task.model";
    import { v4 as uuid } from "uuid";
   
   @Component({
     selector: "app-task-list",
     templateUrl: "./task-list.html",
     styleUrls: ["./task-list.css"],
   })
   
   export class TaskList {
   
     tasks: WritableSignal<Task[]> = signal([
       {
         id: uuid(),
         title: "Task 1",
         description: "Description of task 1",
         createdAt: new Date(),
       },
       {
         id: uuid(),
         title: "Task 2",
         description: "Description of task 2",
         createdAt: new Date(),
       },
     ]);
   }

Inject TaskService

Your TaskListComponent class needs to use TaskService to get the tasks list. Angular uses the dependency injection system to provide TaskService to the TaskListComponent class.

The TaskService class is prefixed with the @Injectable() decorator. A decorator is a special syntax in TypeScript used to attach metadata to a class, method, or property (You already saw it in the component file: @Component() ). The @Injectable() decorator tells Angular that the TaskService class can be injected into other classes.

This is achieved by referencing the TaskService class in the TaskListComponent class constructor by using the inject function.

private taskService = inject(TaskService);

Your application compiles again and you can now use the taskService variable tasks to access the tasks list and initialize a local variable with the tasks list.

tasks = this.taskService.tasks;

1. Update the src/app/task-list.ts file.

import { Component } from "@angular/core";

import { TaskService } from "../task.service";

@Component({
  selector: "app-task-list",
  templateUrl: "./task-list.component.html",
  styleUrls: ["./task-list.component.css"],
})
export class TaskList {

  private taskService = inject(TaskService);

  tasks = this.taskService.tasks;
}