13. Liaison de données bidirectionnelle [(ngModel)]

La liaison de données bidirectionnelle (Two-Way Data Binding) synchronise simultanément le flux de données entre la classe du composant et la vue du template. Les changements dans le composant mettent à jour la vue, et les changements dans la vue mettent à jour le modèle du composant.

La banane dans une boîte [()]

Angular utilise la syntaxe spéciale [()], souvent appelée 'banane dans une boîte', pour désigner la liaison bidirectionnelle. C'est un raccourci syntaxique combinant la liaison de propriété ([]) et la liaison d'événement (()) :

html [(ngModel)]="dataProperty"

// est équivalent à :

[ngModel]="dataProperty" (ngModelChange)="dataProperty = $event"

Prérequis : FormsModule

La liaison bidirectionnelle utilise principalement la directive ngModel, qui fait partie du FormsModule d'Angular. Vous devez importer ce module dans votre NgModule pour utiliser ngModel.

Mise à jour de app.module.ts :

typescript import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; // 1. Importer FormsModule

@NgModule({ imports: [BrowserModule, FormsModule], // 2. Ajouter au tableau imports // ... }) export class AppModule { }

Exemple de liaison bidirectionnelle

Classe du composant :

typescript export class LoginComponent { username: string = 'utilisateur_initial'; }

Template :

html

Éditeur de profil utilisateur

<input type="text" [(ngModel)]="username">

La valeur du modèle est : {{ username }}

La liaison bidirectionnelle est incroyablement pratique pour les formulaires de saisie de données simples, mais pour les applications complexes, en particulier les grands formulaires, les Reactive Forms (abordés plus tard) offrent plus de contrôle.