Você criou o TaskService, que é responsável por armazenar e gerenciar a lista de tarefas. No entanto, o serviço por si só não interage com a interface do usuário. Para obter os dados do serviço no template do componente, é necessário injetar o serviço no componente correspondente.

Agora, será apresentado como o Angular conecta automaticamente serviços a componentes utilizando a Injeção de Dependência (DI) e como o serviço funciona dentro do componente.

O que é Injeção de Dependência?

Graças ao DI, os componentes não criam instâncias de serviços por conta própria — eles simplesmente recebem uma instância já criada. O Angular se encarrega de fornecer os objetos necessários para quem precisar deles.

Isso funciona porque o serviço é decorado com:

@Injectable({
  providedIn: 'root'
})

Este decorador informa ao Angular para criar uma única instância (singleton) do serviço para todo o aplicativo e torná-la disponível para DI.

Injeção do Serviço em um Componente

Agora, vamos injetar o TaskService no TaskListComponent para que ele possa obter a lista de tarefas e interagir com ela.

Veja como fica o código do componente:

Importação do TaskService, da interface Task e de outros componentes e módulos necessários para o template.

No construtor do componente, o serviço é adicionado por meio da Injeção de Dependência:

O serviço é armazenado como um campo privado para uso nos métodos do componente. Logo após a criação do componente (dentro do construtor), a lista de tarefas é obtida. Essa lista é então utilizada no template HTML.

Os métodos deleteTask e toggleStatus chamam as funções do serviço para excluir uma tarefa ou alternar seu status, em seguida atualizam o array local tasks para que a interface reflita as alterações.

Essa abordagem mantém o componente simples: ele não sabe como os dados são armazenados ou manipulados — apenas solicita ao serviço que os atualize. Isso separa as responsabilidades: componentes lidam com a visualização e serviços lidam com os dados.