Angular - 1.5 Editer premiere application part 2

Dans la leçon précédente, nous avons découvert un élément mystérieux dans app.component.html : {{ title }}, entouré de doubles accolades. Voyons d'où vient cet élément, comment il fonctionne et ce qu'il nous permet de faire. C'est notre première rencontre avec le data binding.

Dans le même dossier que app.component.html, on trouve un fichier TypeScript du même nom. Ce fichier déclare une classe AppComponent avec un attribut public title dont la valeur est par exemple 'my-dream-app'. Côté HTML, lorsqu'on écrit {{ title }}, on appelle en réalité cet attribut de la classe TypeScript correspondante. Si on remplace la valeur en TypeScript, la modification est immédiatement répercutée dans le navigateur. C'est ce qu'on appelle le one-way binding (interpolation) : le TypeScript pousse la valeur vers le HTML.

Two-way binding avec ngModel

  • On crée un attribut name = 'gandalf' dans la classe TypeScript.
  • Dans le HTML, on affiche la valeur avec <p>{{ name }}</p>.
  • On ajoute un champ <input type="text" [(ngModel)]="name"> pour lier le champ à l'attribut dans les deux sens.
  • La directive ngModel avec la syntaxe [()] (banana in a box) crée un two-way binding.

À ce stade, une erreur apparaît dans l'IDE et le terminal : Angular ne reconnaît pas ngModel. C'est parce qu'Angular fonctionne par modules, et ngModel appartient au module FormsModule qu'il faut importer explicitement. On ouvre app.module.ts, on ajoute import { FormsModule } from '@angular/forms'; en haut, puis on ajoute FormsModule à la liste imports du décorateur @NgModule. Après un redémarrage du serveur (ng serve), tout fonctionne : le champ affiche gandalf, et toute modification dans le champ (par exemple « saroumane ») met à jour instantanément le paragraphe — et inversement, un changement côté TypeScript se répercute dans le champ.

On a donc vu deux concepts fondamentaux : le one-way binding (TypeScript → HTML, via l'interpolation {{ }}) et le two-way binding (HTML ↔ TypeScript, via [(ngModel)]). On y reviendra plus en profondeur dans les prochaines vidéos, mais ces deux briques sont au cœur de toute application Angular interactive.

En résumé

Ce cours introduit les fondamentaux du **data binding dans Angular**, en commençant par la liaison unilatérale (one-way binding) où les attributs TypeScript sont affichés dans le template HTML via la syntaxe `{{ }}`. Il progresse ensuite vers la liaison bidirectionnelle (two-way binding) en utilisant la directive `ng-model`, tout en soulignant l'importance d'importer les modules nécessaires (FormsModule) dans `app.module.ts` pour que ces fonctionnalités soient disponibles.

Points clés

  • Structure des composants — Les fichiers composants sont organisés en dossiers contenant le HTML, CSS et TypeScript (.ts)
  • Data binding unilatéral — Les attributs publics TypeScript s'affichent dans le HTML avec {{ nomAttribut }}
  • Interpolation dans les templates — Les doubles accolades {{ }} créent un lien entre la classe TypeScript et le template HTML
  • Two-way binding avec ng-model — La directive ng-model permet une modification bidirectionnelle entre le formulaire HTML et l'attribut TypeScript
  • Import obligatoire des modules — FormsModule doit être importé dans app.module.ts pour que ng-model fonctionne
  • Redémarrage du serveur — Après ajout de nouveaux imports de modules, le serveur de développement doit être relancé

Questions fréquentes

Comment afficher une valeur d'attribut TypeScript dans le template HTML ?

En utilisant la syntaxe {{ nomAttribut }} pour créer une liaison de données unilatérale, affichant la valeur de l'attribut public défini dans la classe TypeScript.

Quelle est la différence entre one-way et two-way binding ?

Le one-way binding affiche une valeur du TypeScript vers le HTML. Le two-way binding (via ng-model) permet une modification bidirectionnelle : la valeur change dans le TypeScript quand l'utilisateur modifie le champ HTML, et réciproquement.

Pourquoi ng-model génère une erreur et comment la corriger ?

La directive ng-model nécessite que le module FormsModule soit importé dans app.module.ts. Ajouter import { FormsModule } from '@angular/forms' et inclure FormsModule dans la liste des modules importés résout l'erreur.