Lors d’un entretien technique on m’a posé une question simple mais très pertinente : Comment afficher en temps réel dans la console la valeur saisie par l’utilisateur dans un champ de saisie Angular ?

Objectif

à chaque frappe de l’utilisateur, la valeur du champ doit être affichée dans la console du navigateur.

Solution 1 : Utiliser l’événement (input)

HTML

<input (input)="afficherDansConsole($event)" placeholder="Tapez ici..." />

TypeScript

afficherDansConsole(event: Event) {
  const valeur = (event.target as HTMLInputElement).value;
  console.log('Valeur saisie :', valeur);
}

Solution 2 : Utiliser [(ngModel)] avec (ngModelChange)

HTML

<input [(ngModel)]="saisie" (ngModelChange)="afficherDansConsole($event)" />

TypeScript

saisie: string = '';

afficherDansConsole(valeur: string) {
  console.log('Valeur saisie :', valeur);
}