Angular - 2.17-Transmettre et utiliser des données avec la liaison d'événements

L'event binding est la forme de data binding qui permet à un élément du template d'envoyer une information vers le code TypeScript du composant. Concrètement, on capte un événement du DOM (clic, saisie clavier, changement de sélection, soumission de formulaire…) et on déclenche en réponse une méthode TypeScript. La syntaxe utilise des parenthèses : <button (click)="onClick()">OK</button>.

Dans la méthode appelée, on peut accéder à la donnée portée par l'événement via la variable spéciale $event. C'est particulièrement utile pour capter le contenu d'un champ de saisie ou les coordonnées d'un clic. Par exemple, sur un input : <input (input)="onInput($event)"> permet, côté TS, d'écrire onInput(event: Event) { this.value = (event.target as HTMLInputElement).value; }.

Événements courants utilisés

• (click) — clic sur un bouton, un lien, n'importe quel élément.
• (input) — saisie clavier dans un champ texte (à chaque caractère).
• (change) — changement de valeur d'un input ou d'un select (à la perte de focus).
• (submit) — soumission d'un formulaire.
• (mouseenter), (keyup), (focus) — autres événements DOM standards.

Du côté TypeScript, la méthode appelée par l'event binding peut faire absolument tout ce que l'on souhaite : mettre à jour une propriété, faire un appel HTTP, déclencher une navigation, etc. C'est ce qui rend l'application interactive : c'est par l'event binding que l'utilisateur communique son intention à l'application.

Avec l'interpolation, le property binding et l'event binding, on dispose désormais des trois formes principales de data binding. La quatrième, le two-way binding avec [(ngModel)], est en réalité la combinaison d'un property binding et d'un event binding sur le même élément — c'est ce que nous verrons en détail dans la prochaine leçon.