Gestion des événements

La gestion des événements rend possibles les fonctionnalités interactives des applications web. En tant que développeur, elle vous permet de réagir aux actions de l'utilisateur, comme les clics sur un bouton, les soumissions de formulaire et plus encore.

Note : Pour en savoir plus, consultez la gestion des interactions utilisateur dans le guide des Fondamentaux.

Dans cette activité, vous allez apprendre à ajouter un event handler.

Dans Angular, vous vous liez aux événements avec la syntaxe des parenthèses (). Sur un élément donné, entourez de parenthèses l'événement auquel vous voulez vous lier et définissez un event handler. Prenons cet exemple de button :

@Component({
  ...
  template: `<button (click)="greet()">`
})
export class App {
  greet() {
    console.log('Hello, there 👋');
  }
}

Dans cet exemple, la fonction greet() s'exécute à chaque clic sur le bouton. Notez que la syntaxe greet() inclut les parenthèses finales.

À vous d'essayer :

Ajouter un event handler

Dans la classe App, complétez le corps de la méthode existante showSecretMessage() avec le code suivant :
```
this.message = 'Way to go 🚀';
```
Lier l'événement dans le template

Mettez à jour le code du template dans app.ts pour lier l'événement mouseover de l'élément section.
```
<section (mouseover)="showSecretMessage()">
```

En quelques étapes dans le code, vous avez créé votre premier event handler dans Angular. Vous semblez vous débrouiller plutôt bien : continuez comme ça.

Ajouter un event handler

Lier l'événement dans le template