Angular - 2.20-Exercice2

Cet exercice met en pratique les quatre formes de data binding vues dans les leçons précédentes. L'objectif est de manipuler chacun d'eux dans un même composant pour bien ancrer les différences entre interpolation, property binding, event binding et two-way binding.

Énoncé de l'exercice

  • Créer un input lié à une propriété userName via [(ngModel)] (two-way binding).
  • Afficher la valeur saisie sous l'input avec une interpolation {{ userName }}.
  • Ajouter un bouton qui n'est activé que lorsque userName n'est pas vide (property binding sur [disabled]).
  • Au clic sur ce bouton, déclencher une méthode TS qui réinitialise userName à la chaîne vide (event binding sur (click)).

Cet exercice paraît simple mais il combine les quatre mécanismes du data binding dans un même flux d'interaction. Côté template, on a un <input [(ngModel)]="userName">, un <p>Bonjour {{ userName }}</p>, et un <button [disabled]="!userName" (click)="reset()">Réinitialiser</button>. Côté TypeScript, la classe déclare userName = '' et une méthode reset() qui remet la propriété à vide.

N'oubliez pas d'importer FormsModule dans app.module.ts, sans quoi ngModel sera rejeté par Angular. Une fois en place, tapez du texte dans le champ : le paragraphe sous l'input se met à jour en temps réel (two-way + interpolation), le bouton devient cliquable (property binding), et un clic réinitialise tout (event binding). Vous voyez les quatre formes de data binding fonctionner ensemble dans un mini-formulaire interactif.

En résumé

Cette leçon débute l'exercice pratique du cours en présentant un projet applicatif complet : une application de gestion de recettes et liste de courses combinant les notions apprises précédemment. L'accent est mis sur la planification de la structure applicative et l'identification des composants Angular nécessaires avant de commencer le développement réel.

Points clés

  • Mise en pratique des notions Angular précédentes dans un projet réel et fonctionnel
  • Projet applicatif : gestion d'un livre de recettes avec détail des ingrédients et liste de courses
  • Fonctionnalités clés : afficher/gérer les recettes, gérer la liste d'achat, ajouter les ingrédients directement à la liste
  • Importance de la planification préalable : définir la structure et les composants avant de coder
  • Approche par étapes : conception des composants en première vidéo, développement dans les suivantes

Questions fréquentes

Quels sont les objectifs de ce projet d'exercice Angular ?

L'objectif est de construire une application complète de gestion de recettes et liste de courses, consolidant les apprentissages précédents du cours et démontrant comment plusieurs fonctionnalités Angular interagissent dans une application réelle.

Comment débuter correctement cet exercice ?

Il est recommandé de commencer par planifier et définir la structure de l'application, puis identifier tous les composants Angular nécessaires pour les différentes fonctionnalités, avant de passer au codage effectif dans les vidéos suivantes.

Quelles fonctionnalités principales l'application proposera-t-elle ?

L'application disposera de deux sections principales : un livre de recettes (affichage, détail, gestion) et une liste d'achats, avec la possibilité d'ajouter directement les ingrédients d'une recette à sa liste de courses.