Liaison de données bidirectionnelle dans Angular

Dans Angular, il est possible de faire en sorte qu'au fur et à mesure de la saisie de texte dans un champ de saisie, ce texte soit automatiquement inséré dans une propriété de classe. Cela s'appelle la liaison de données bidirectionnelle.

Pour que cette liaison fonctionne, il faut d'abord l'activer. Pour cela, dans le fichier du composant, importons FormsModule :

import { FormsModule } from '@angular/forms';

Puis ajoutons-le dans la propriété imports du décorateur @Component :

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

Après cela, la liaison de données bidirectionnelle sera activée et nous pourrons l'utiliser. Faisons-le.

Pour commencer, déclarons une propriété de classe que nous soumettrons ensuite à la liaison bidirectionnelle :

export class AppComponent {
	public text: string = '';
}

Supposons que nous ayons un div et un champ de saisie. Faisons en sorte que dans le div soit affichée une certaine propriété de classe :

<div>
	{{ text }}
</div>
<input>

Relions notre propriété text à la modification du champ de saisie. Pour cela, dans le champ de saisie, il faut écrire la directive spéciale [(ngModel)], dont la valeur doit être la propriété de notre classe :

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

Maintenant, si vous exécutez le code et commencez à saisir du texte dans le champ de saisie, ce texte commencera immédiatement à s'afficher dans le div.

Un champ de saisie et un paragraphe sont donnés. Un nombre est affiché dans le champ de saisie. Faites en sorte qu'au fur et à mesure de la saisie du nombre dans le champ de saisie, le paragraphe affiche le carré de ce nombre.

Deux champs de saisie et un paragraphe sont donnés. Des nombres sont saisis dans les champs de saisie. Faites en sorte que le paragraphe affiche la somme des nombres saisis.