Vous avez créé le TaskService, qui gère le stockage et la gestion de la liste des tâches. Cependant, le service en lui-même n'interagit pas avec l'interface utilisateur. Pour obtenir les données du service dans le template du composant, il est nécessaire d'injecter le service dans le composant correspondant.

Vous allez maintenant découvrir comment Angular facilite automatiquement la connexion des services aux composants grâce à l'injection de dépendances (DI) et comment le service fonctionne à l'intérieur du composant.

Qu'est-ce que l'injection de dépendances ?

Grâce à l'injection de dépendances (DI), les composants ne créent pas eux-mêmes les instances de service — ils reçoivent simplement une instance déjà créée. Angular se charge de fournir les objets nécessaires à ceux qui en ont besoin.

Cela fonctionne parce que le service est décoré avec :

@Injectable({
  providedIn: 'root'
})

Ce décorateur indique à Angular de créer une seule instance (singleton) du service pour l'ensemble de l'application et de la rendre disponible pour l'injection de dépendances (DI).

Injection du service dans un composant

Nous allons maintenant injecter le TaskService dans le TaskListComponent afin qu'il puisse obtenir la liste des tâches et interagir avec celle-ci.

Voici à quoi ressemble le code du composant :

Nous importons le TaskService, l’interface Task, ainsi que d’autres composants et modules nécessaires pour le template.

Dans le constructeur du composant, nous ajoutons le service via l’injection de dépendances :

Le service est stocké comme un champ privé afin d’être utilisé dans les méthodes du composant. Juste après la création du composant (dans le constructeur), la liste des tâches est récupérée. Cette liste est ensuite utilisée dans le template HTML.

Les méthodes deleteTask et toggleStatus appellent les fonctions du service pour supprimer une tâche ou basculer son statut, puis mettent à jour le tableau local tasks afin que l'interface utilisateur reflète les modifications.

Cette approche permet de garder le composant simple : il ne sait pas comment les données sont stockées ou gérées — il demande simplement au service de les mettre à jour. Cela sépare les responsabilités : les composants gèrent la vue, et les services gèrent les données.