Injectez le service dans le composant de formulaire

Objectifs de ce chapitre

• ✔️
  Utilisez TaskService pour créer une tâche

  Créez une nouvelle tâche avec le composant TaskFormComponent en utilisant le service TaskService.

Injectez le TaskService dans le TaskFormComponent

La première étape est d’injecter le service dans votre composant.

🎓 Instructions

1. Modifiez le fichier src/app/task-form.component.ts.

   task-form.component.ts

   import { Component } from '@angular/core';
   
   import { TaskService } from '../task.service';
   
   @Component({
       selector: 'app-task-form',
       templateUrl: './task-form.component.html',
       styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent {
       task = {
           title: '',
           description: ''
       };
   
   
       constructor(private taskService: TaskService) { }
   
   
       submit() {
           this.taskService.addTask(this.task);
       }
   }

La classe TaskFormComponent utilise désormais TaskService pour ajouter une nouvelle tâche à la liste.

Testons-le

1. Retournez dans votre navigateur
2. Cliquez sur le lien Ajouter une nouvelle tâche
3. Saisissez un titre et une description dans le formulaire
4. Cliquez sur le bouton Créer une tâche
5. Cliquez sur le lien Liste des tâches

Vous devriez voir la nouvelle tâche dans la liste.

✔️ Ce que vous avez appris

Vous avez appris à utiliser TaskService une fois de plus ! Cette fois-ci pour déclencher la fonction addTask afin d’ajouter une nouvelle tâche à la liste des tâches. Bien joué ! 🤩