12. Liaison d'événement ( )

La liaison d'événement (Event Binding) permet à l'application de répondre aux interactions de l'utilisateur, comme les clics, les pressions sur les touches ou les soumissions de formulaires. C'est un moyen de lier une méthode de composant à un événement déclenché par un élément HTML.

Syntaxe

La liaison d'événement utilise des parenthèses (( )) autour de l'événement de l'élément cible. La valeur est une instruction qui exécute une méthode du composant.

html <element (event-name)="componentMethod($event)">

Exemple : Gérer les clics

Classe du composant (counter.component.ts) :

typescript export class CounterComponent { count: number = 0;

increment() { this.count++; }

decrement() { if (this.count > 0) { this.count--; } } }

Template (counter.component.html) :

html

Compte actuel : {{ count }}

<button (click)="increment()">+

<button (click)="decrement()">-

L'objet Event ($event)

De nombreux événements DOM transmettent un objet événement. Vous pouvez accéder à cet objet dans l'expression de liaison en utilisant le mot-clé $event.

Exemple : Capturer les données saisies

html <input (input)="onInput($event)" placeholder="Tapez ici">

Valeur actuelle : {{ inputValue }}

typescript export class InputComponent { inputValue: string = '';

onInput(event: Event) { // Utilisation d'une assertion de type pour accéder à la propriété value de la cible this.inputValue = (event.target as HTMLInputElement).value; } }