TP 3 : réaliser une TodoList avec Angular

1. Objectifs

   • Construire une application Angular complète, découpée en sept composants qui ont chacun un rôle unique
   • Appliquer la règle d'or de la communication : les données descendent par input(), les événements remontent par output(), un seul composant possède les données
   • Relayer des événements sur plusieurs niveaux, et modifier un tableau d'objets de façon immuable
   • Utiliser model() pour une liaison bidirectionnelle entre composants
   • Commander un enfant avec viewChild(): appeler ses méthodes, accéder au DOM (focus(), <dialog>)
   • Réinvestir les signals (computed, linkedSignal, effect), les événements clavier et les variables de template
   • Travailler par étapes vérifiables, avec un commit Git à chaque point de contrôle

1. Prérequis

   • Avoir suivi les leçons du chapitre « Interaction entre composants » : Les composants, La communication entre composants, Transmettre des données avec input(), Émettre des événements avec output(), Accéder à un composant enfant avec viewChild.
   • Avoir réalisé le TP 2 : compteur interactif : la création de projet, les signals, les liaisons et les événements clavier sont supposés acquis.

1. Présentation du projet

   • Vous allez développer Mes tâches, une liste de tâches (TodoList) complète :
     • ajouter une tâche avec un titre, une priorité (haute, normale, basse) et une échéance facultative ;
     • cocher, modifier (double-clic) et supprimer une tâche ; une tâche dont l'échéance est passée est signalée « En retard » ;
     • filtrer (toutes, actives, terminées), rechercher, tout terminer, supprimer les tâches terminées après confirmation;
     • suivre sa progression, utiliser des raccourcis clavier, et retrouver ses tâches après un rechargement de la page.
   • La liste est toujours triée : tâches actives d'abord, puis par priorité, puis par échéance.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, les notions mobilisées, les consignes, une aide, un point de contrôle à vérifier avant de continuer, et des questions.
   • Répondez aux questions dans un fichier README.md, à la racine du projet, au fur et à mesure.
   • À la fin de chaque partie, faites un commit: git commit -m "Partie N : …".
   • Les aides donnent des squelettes de code, jamais la solution complète : c'est à vous de compléter.
   • Une règle s'applique à tout le TP : seul App modifie la liste des tâches. Les autres composants reçoivent des données et émettent des événements.

1. Partie 0 : mise en place du projet

⏱ 20 min

Notions mobilisées : Les composants · La syntaxe de base

• Créez le projet, générez les six composants enfants et le dossier du modèle :

npx @angular/cli@latest new tp3-todolist --defaults --ssr=false --style=css
cd tp3-todolist
npx ng generate component formulaire-tache
npx ng generate component barre-filtres
npx ng generate component liste-taches
npx ng generate component item-tache
npx ng generate component progression
npx ng generate component boite-confirmation
mkdir src/app/modeles
npx ng serve

• Dans app.html, placez un en-tête (<h1>Mes tâches</h1>) et une carte <main class="carte-tp"> qui contiendra le formulaire, la barre de filtres et la liste.
• Dans styles.css, définissez les variables de couleur (--bleu, --vert, --rouge, --gris, --bord), un style commun pour les boutons (avec les variantes .secondaire, .danger et .icone) et la classe .carte-tp.
• Dans app.config.ts, activez le français pour le pipe date: registerLocaleData(localeFr) et { provide: LOCALE_ID, useValue: 'fr' }.

src/app/
├── app.ts / app.html / app.css        ← possède les données (toutes les parties)
├── modeles/tache.ts                   ← partie 1
├── liste-taches/  item-tache/         ← parties 2, 4 et 6
├── formulaire-tache/                  ← partie 3
├── barre-filtres/                     ← partie 5
├── progression/  boite-confirmation/  ← partie 7

git add .
git commit -m "Partie 0 : création du projet et des composants"

1. Partie 1 : le modèle TypeScript

⏱ 30 min

Notions mobilisées : Le typage fort

• Dans src/app/modeles/tache.ts, sans aucun code Angular :
  • deux types : Priorite ('haute', 'normale', 'basse') et Filtre ('toutes', 'actives', 'terminees') ;
  • une interface Tache dont toutes les propriétés sont readonly: id, titre, priorite, echeance (string | null, au format AAAA-MM-JJ), terminee, creeeLe (Date) ;
  • un type NouvelleTache, construit avec Pick<Tache, …>, qui ne garde que ce que l'utilisateur saisit ;
  • une interface Compteurs: toutes, actives, terminees; une constante PRIORITES;
  • quatre fonctions : creerTache(n) (identifiant crypto.randomUUID(), titre nettoyé, non terminée), dateDuJour(decalage = 0), estEnRetard(tache, aujourdhui) et trierTaches(taches).

export interface Tache {
  readonly id: string;
  /* à compléter : titre, priorite, echeance, terminee, creeeLe */
}

export type NouvelleTache = Pick<Tache, /* à compléter */>;

// Tâches actives d'abord, puis par priorité, puis par échéance (sans échéance à la fin)
export function trierTaches(taches: readonly Tache[]): Tache[] {
  return [...taches].sort((a, b) =>
    Number(a.terminee) - Number(b.terminee) || /* priorité */ || /* échéance */);
}

• Les dates au format AAAA-MM-JJ se comparent comme du texte : '2026-10-29' < '2026-10-31' vaut true. Pour dateDuJour(), construisez la chaîne avec getFullYear(), getMonth() + 1 et getDate(), complétés par padStart(2, '0').

git add .
git commit -m "Partie 1 : modèle TypeScript"

1. Partie 2 : afficher la liste avec input()

⏱ 40 min

Notions mobilisées : Transmettre des données avec input() · La communication entre composants · La syntaxe de base

• Dans App: un signal taches initialisé avec quatre tâches d'exemple (dont une terminée et une en retard), une propriété aujourdhui = dateDuJour() et un computed visibles qui renvoie la liste triée.
  • ListeTaches: deux entrées obligatoires, taches et aujourdhui; un @for … track t.id qui affiche un <app-item-tache> par tâche, et @empty: « Aucune tâche à afficher. » ;
  • ItemTache: entrées obligatoires tache et aujourdhui; un computed enRetard; affichage d'une case à cocher ([checked]), du titre (barré si la tâche est terminée), d'un badge de priorité coloré ([class]), de l'échéance avec le pipe date: 'd MMM', précédée de « En retard · » en rouge si besoin, et de deux boutons ✎ et ✕ (sans action pour l'instant).

export class ItemTache {
  readonly tache = input.required<Tache>();
  readonly aujourdhui = input.required<string>();
  protected readonly enRetard = computed(() => /* à compléter */);
}

git add .
git commit -m "Partie 2 : affichage de la liste"

1. Partie 3 : ajouter une tâche avec output()

⏱ 45 min

Notions mobilisées : Émettre des événements avec output() · Les variables de template · La gestion des événements

• FormulaireTache ne connaît pas la liste : il émet la tâche saisie avec ajouter = output<NouvelleTache>().
  • un <form> avec trois champs marqués par des variables de référence : #titre, #priorite (une liste générée avec @for sur PRIORITES, « normale » sélectionnée par défaut) et #echeance (type="date") ;
  • (submit) empêche le rechargement ($event.preventDefault()) et appelle valider(titre, priorite, echeance);
  • un titre de moins de 3 caractères affiche « Le titre doit comporter au moins 3 caractères. » (signal erreur), effacé dès la frappe suivante ;
  • sinon : émettre, vider le titre et l'échéance, et redonner le focus au titre pour enchaîner les saisies.
• Dans App: (ajouter)="ajouter($event)" crée la tâche avec creerTache() et l'ajoute avec update(). Un signal annonce affiche sous la liste « « … » ajoutée. » (avec aria-live="polite").

protected valider(titre: HTMLInputElement, priorite: HTMLSelectElement, echeance: HTMLInputElement): void {
  const texte = titre.value.trim();
  // 1. vérifier   2. émettre { titre, priorite, echeance }   3. vider et redonner le focus
}

git add .
git commit -m "Partie 3 : formulaire d'ajout"

1. Partie 4 : cocher et supprimer, relayer les événements

⏱ 40 min

Notions mobilisées : Émettre des événements avec output() · La communication entre composants

• Un clic dans une ligne doit modifier la liste, qui appartient à App, deux niveaux plus haut. Les sorties ne remontant que d'un niveau, il faut les relayer:
  • ItemTache émet basculer et supprimer, sans valeur : la ligne ne connaît que sa tâche ;
  • ListeTaches relaie avec ses propres sorties, en ajoutant l'identifiant : (basculer)="basculer.emit(t.id)";
  • App modifie la liste avec map (basculer) et filter (supprimer), et annonce « « … » supprimée. ».

protected basculer(id: string): void {
  this.taches.update((l) => l.map((t) => (t.id === id ? /* nouvelle tâche */ : t)));
}

git add .
git commit -m "Partie 4 : cocher et supprimer"

1. Partie 5 : filtres, recherche et model()

⏱ 40 min

Notions mobilisées : La communication entre composants · Le two-way data binding · Les signals

• BarreFiltres:
  • filtre = model.required<Filtre>() et recherche = model(''): le parent les relie avec [(filtre)]="filtre" et [(recherche)]="recherche";
  • une entrée compteurs (Compteurs) : chaque bouton de filtre affiche son nombre (« Actives 3 ») ; le bouton actif est en bleu ;
  • un champ de recherche #champ qui met à jour recherche à chaque frappe ;
  • deux sorties : toutTerminer et viderTerminees, avec deux boutons « Tout terminer » et « Supprimer les terminées (n) », désactivés s'il n'y a rien à faire.
• Dans App: des signals filtre et recherche, un computed compteurs, et visibles qui filtre maintenant selon le filtre et la recherche (sans tenir compte des majuscules) avant de trier. Pour l'instant, (viderTerminees) supprime directement les terminées : la confirmation viendra à la partie 7.

git add .
git commit -m "Partie 5 : filtres et recherche"

1. Partie 6 : modifier une tâche, linkedSignal et viewChild

⏱ 45 min

Notions mobilisées : Accéder à un composant enfant avec viewChild · Les signals · La gestion des événements · Les variables de template

• Un double-clic sur le titre, ou le bouton ✎, passe la ligne en mode édition (désactivé pour une tâche terminée) :
  • un signal enEdition; avec @if, le titre est remplacé par un champ #champ;
  • le texte saisi est un brouillon: brouillon = linkedSignal(() => this.tache().titre), modifiable, et remis au titre reçu si la tâche change ;
  • Entrée ou la perte du focus (blur) valident : si le brouillon nettoyé fait au moins 3 caractères et diffère du titre, la ligne émet renommer (le nouveau titre) ; Échap annule ;
  • le champ doit recevoir le focus, avec son texte sélectionné, dès son apparition : récupérez-le avec viewChild<ElementRef<HTMLInputElement>>('champ') (sans .required: il n'existe que pendant l'édition) et un effect.
• ListeTaches relaie : (renommer)="renommer.emit({ id: t.id, titre: $event })"; App met à jour le titre et annonce « Tâche renommée en « … ». ».

private readonly champ = viewChild<ElementRef<HTMLInputElement>>('champ');

constructor() {
  effect(() => {
    const c = this.champ()?.nativeElement;
    // si le champ existe : lui donner le focus et sélectionner son texte
  });
}

git add .
git commit -m "Partie 6 : modification d'une tâche"

1. Partie 7 : progression et confirmation

⏱ 45 min

Notions mobilisées : Transmettre des données avec input() · Émettre des événements avec output() · Accéder à un composant enfant avec viewChild · Les composants

• Progression, composant d'affichage pur, placé dans l'en-tête :
  • deux entrées faites et total (avec numberAttribute) ; computed: pourcent et message (« Aucune tâche », « 2 restante(s) », « Tout est fait ! ») ;
  • une barre avec [style.width.%], verte à 100 %, et les attributs role="progressbar" et [attr.aria-valuenow].
• BoiteConfirmation, autour de la balise native <dialog>:
  • entrées titre et libelleConfirmer; le message est projeté avec <ng-content />;
  • une méthode publique ouvrir(), qui appelle showModal() sur le <dialog> obtenu par viewChild.required;
  • Annuler ferme ; le bouton rouge ferme et émet confirmer.
• Dans App: confirmation = viewChild.required(BoiteConfirmation); (viderTerminees) appelle maintenant demanderVidage(), qui ouvre la boîte ; (confirmer) supprime les terminées et annonce « 2 tâche(s) terminée(s) supprimée(s). ».

<app-boite-confirmation titre="Supprimer les tâches terminées ?" libelleConfirmer="Supprimer" (confirmer)="viderTerminees()">
  <p>{{ compteurs().terminees }} tâche(s) terminée(s) seront supprimées définitivement.</p>
</app-boite-confirmation>

git add .
git commit -m "Partie 7 : progression et confirmation"

1. Partie 8 : raccourcis clavier et sauvegarde

⏱ 35 min

Notions mobilisées : Accéder à un composant enfant avec viewChild · La gestion des événements · Les signals

• Raccourcis globaux, écoutés dans App avec host: { '(document:keydown)': 'clavier($event)' }:

• ignorez les touches tapées dans un champ (sinon on ne pourrait plus écrire un « n ») et les combinaisons avec Ctrl, Alt ou Cmd ;
• App obtient les enfants avec viewChild.required(FormulaireTache) et viewChild.required(BarreFiltres), et appelle leurs méthodes publiques focaliser() et focaliserRecherche() (chacune utilise un viewChild sur son champ) ;
• appelez preventDefault(): sinon le « n » serait aussi tapé dans le champ qui vient de recevoir le focus.
• Sauvegarde: un effect enregistre taches() dans localStorage (dans un try … catch) ; au démarrage, taches est initialisé par une méthode lire() qui relit ces données, reconvertit creeeLe en Date, et renvoie les exemples s'il n'y a rien.

git add .
git commit -m "Partie 8 : clavier et sauvegarde"

1. Partie 9 : variantes et finitions

⏱ 20 min

• Choisissez deux variantes (chaque binôme annonce ses choix au formateur) :
  • des catégories (Cours, Maison, Sport…) avec un filtre supplémentaire ;
  • un bouton « Annuler la suppression » pendant 5 secondes après chaque suppression ;
  • une échéance modifiable en mode édition ;
  • un tri au choix (priorité, échéance, date de création, ordre alphabétique) ;
  • une confirmation avant de supprimer une tâche non terminée, avec la même BoiteConfirmation;
  • une variante libre, validée par le formateur.
• Relisez votre code : membres protected ou private quand ils ne servent pas au parent, noms explicites, aucun console.log, aucune erreur dans la console.

git add .
git commit -m "Partie 9 : variantes et finitions"

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt Git, avec au moins dix commits nommés « Partie N : … ».
   • Le fichier README.md: vos noms, les réponses aux questions, les deux variantes choisies et une capture d'écran de l'application terminée.
   • Le projet doit se lancer avec npm install puis npx ng serve, sans erreur ni avertissement.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Déplacer la liste et ses méthodes dans un service TachesService injecté avec inject(): c'est l'objet du chapitre « Les services et l'injection de dépendances ».
   • Afficher les tâches actives et terminées sur deux pages, avec le routage.
   • Écrire des tests unitaires pour trierTaches() et estEnRetard() avec npx ng test.

1. Bilan

   • Chaque composant a un rôle : saisir, filtrer, afficher une ligne, afficher la liste, montrer la progression, confirmer.
   • Un seul composant possède les données ; les autres les reçoivent par input() et annoncent les actions par output(), relayées niveau par niveau.
   • model() crée une liaison bidirectionnelle propre entre un parent et un enfant.
   • viewChild() sert à commander: donner le focus, ouvrir une boîte de dialogue, appeler une méthode publique.
   • Les mises à jour immuables (map, filter, ...) gardent tous les computed justes.

Une bonne TodoList ne se juge pas au nombre de ses fonctions, mais à la clarté du chemin que suit chaque donnée : du parent qui la possède jusqu'à l'enfant qui l'affiche, et retour.