Angular
Réactivité

La fonction model()

Historiquement, pour faire du "Double Binding" (lire ET écrire une donnée en temps réel), on utilisait [(ngModel)]. Avec Angular 17+, on peut utiliser model() ! C'est un Signal spécial qui permet la communication bilatérale.

La Saisie Utilisateur
Aperçu en temps réel
Avatar

Anonyme

En ligne

Le Double Binding

Le principe du double binding, c'est que l'écran (HTML) et le code (TypeScript) sont toujours parfaitement synchronisés : Si le code change, l'écran se met à jour. Si l'utilisateur tape sur l'écran, le code se met à jour !

  • Du Code vers l'Écran

    On lit le modèle avec les parenthèses [value]="username()".

  • De l'Écran vers le Code

    On écoute l'événement de saisie et on met à jour avec this.username.set(valeur).

Le Code Source Complet

model-binding.component.ts
import { Component, model } from '@angular/core';

@Component({
  selector: 'app-user-form',
  template: `
    <!-- Lecture : [value] / Écriture : (input) -->
    <input 
      [value]="username()" 
      (input)="updateUsername($event)" 
    >
    
    <p>Nom : {{ username() }}</p>
    <button (click)="clearUsername()">Effacer</button>
  `
})
export class UserComponent {
  // Déclaration du modèle réactif (un signal spécial)
  username = model(''); 

  updateUsername(event: Event) {
    const input = event.target as HTMLInputElement;
    // Mise à jour du modèle
    this.username.set(input.value);
  }

  clearUsername() {
    // Le HTML va automatiquement vider l'input !
    this.username.set('');
  }
}