Event binding

Objectifs de ce chapitre

• ✔️
  Event binding

  Apprenez à lier un événement à une fonction dans Angular.

Event binding

L’event binding permet d’écouter les évènements et d’exécuter une fonction lorsque l’évènement est déclenché. Dans la situation actuelle, vous allez exécuter une fonction lorsque l’on clique sur le bouton ‘Créer une tâche’.

Sur la balise HTML <button>, vous pouvez lier l’événement clic à une fonction en utilisant la syntaxe (click). Vous lui attribuez la fonction que vous voulez exécuter lorsque l’on clique sur le bouton.

<button type="submit" class="btn btn-primary" (click)="submit()">Soumettre</button>

Dans la classe du TaskFormComponent, vous devez créer la fonction liée. Sans cela, Angular ne compilera pas.

🎓 Instructions

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

   task-form.component.html

   <form>
     <label for="title" class="form-label">Titre:</label>
     <input type="text" id="title" name="title" class="form-control" [(ngModel)]="task.title">
   
     <label for="description" class="form-label">Description:</label>
     <textarea id="description" name="description" class="form-control" [(ngModel)]="task.description"></textarea>
   
     <button type="submit" class="btn btn-primary" (click)="submit()">Soumettre</button>
   </form>

Fonction submit

Vous allez créer une fonction submit pour gérer la soumission du formulaire. Pour cette étape, vous allez seulement enregistrer la valeur du formulaire dans la console.

🎓 Instructions

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

   task-form.component.ts

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-task-form',
     templateUrl: './task-form.component.html',
     styleUrls: ['./task-form.component.css']
   })
   export class TaskFormComponent {
   
     task: TaskForm = {
       title: '',
       description: ''
     };
   
     submit(): void {
       console.log('Tâche créée', this.task);
     }
   }

2. Ouvrez la console Devtools de votre navigateur.

3. Remplissez les champs de titre et de description et cliquez sur le bouton ‘create task’.

4. En cliquant sur le bouton ‘create task’, vous devriez voir les données du formulaire s’afficher dans la console.

✔️ Ce que vous avez appris

Vous avez appris à écouter un événement pour déclencher une fonction.