Le cœur d'Angular : synchronisez instantanément vos données entre le code (TypeScript) et l'interface (HTML) de manière réactive.
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
imports: [FormsModule],
template: `
<div class="container">
<h2>{{ productName }}</h2>
<!-- Interpolation -->
<button (click)="addToCart()">Ajouter au panier</button>
<!-- Event binding -->
<input [(ngModel)]="quantity" type="number" />
<!-- Two-way binding -->
</div>
`
})
export class AppComponent {
productName: string = 'Produit Premium';
quantity: number = 1;
addToCart() {
alert(`${this.quantity} ${this.productName}(s) ajouté(s) au panier.`);
}
}{{ variable }}Affiche la valeur d'une variable TypeScript directement dans le code HTML. C'est le flux de données allant du Composant ➔ Vue.
<p>Bienvenue, {{ userName }} !</p>[propriété]="variable"Lie une propriété d'un élément HTML ou d'un composant enfant à une variable TypeScript. Flux : Composant ➔ Vue.
<button [disabled]="isFormInvalid">Valider</button>
<img [src]="userAvatarUrl" />(événement)="methode()"Écoute une action de l'utilisateur sur la vue (clic, frappe au clavier...) pour déclencher une méthode TypeScript. Flux : Vue ➔ Composant.
<button (click)="saveData()">Enregistrer</button>
<input (keyup.enter)="submitSearch()" />[(ngModel)]="variable"Combine le Property et l'Event Binding. Toute modification dans le champ texte met à jour la variable, et vice-versa. Flux : Bidirectionnel ➔ ⬅️.
<input [(ngModel)]="searchQuery" placeholder="Rechercher..." />
<p>Vous cherchez : {{ searchQuery }}</p>| Concept | Syntaxe | Flux de données |
|---|---|---|
| Unidirectionnel (Affichage) | {{ }} ou [ ] | TypeScript ➔ HTML |
| Événements (Action) | ( ) | HTML ➔ TypeScript |
| Bidirectionnel (Synchronisé) | [( )] | HTML ⬅️ ➔ TypeScript |