18. Gestion des entrées utilisateur (Variables de référence)

En plus de la liaison d'événement, Angular propose des variables de référence de template pour un accès direct aux éléments du DOM ou aux instances de composants au sein du template.

Qu'est-ce qu'une variable de référence de template ?

Une variable de référence de template est déclarée en utilisant le symbole dièse (#) suivi du nom de la variable (ex: #usernameInput). Elle référence généralement l'élément DOM sur lequel elle est définie.

Exemple : Accéder à la valeur d'un input

Nous pouvons utiliser une variable de référence de template pour contourner la liaison d'événement si nous n'avons besoin que de la valeur finale lors d'un événement de clic.

html

Classe du composant :

typescript export class InputSaverComponent { savedName: string = '';

saveData(inputVal: string) { this.savedName = inputVal; console.log(Sauvegardé : ${this.savedName}); } }

Référencer NgModel ou une instance de composant

Si la variable de référence est définie sur un élément qui héberge une directive Angular (comme ngModel) ou un composant, la variable pointera vers l'instance de cette directive ou de ce composant, et non simplement vers l'élément DOM.

html <input type="email" #emailControl="ngModel" [(ngModel)]="userEmail">

L'email est requis !

Ici, #emailControl contient l'instance de NgModel, nous permettant d'accéder à ses propriétés d'état cruciales pour la validation de formulaire.