Angular : composants et templates

Objectifs

À la fin de cette leçon, vous saurez :

• définir un composant (template + classe + styles) ;
• utiliser les bindings de données et d'événements ;
• relier Angular à votre expérience du DOM manuel.

🔗 Pour vous rafraîchir la mémoire : décorateurs et metadata

Le composant : l'unité d'interface

@Component({
  selector: 'app-task-item',
  template: `
    <li [class.fait]="task.fait">
      {{ task.titre }}
      <button (click)="basculer()">✓</button>
    </li>
  `,
})
export class TaskItemComponent {
  @Input() task!: Task;
  @Output() bascule = new EventEmitter<number>();

  basculer() {
    this.bascule.emit(this.task.id);
  }
}

Trois parties : une classe (l'état et la logique), un template (la vue déclarative), des styles. Le sélecteur en fait une balise réutilisable : <app-task-item>.

Les trois bindings — vos manipulations DOM automatisées

La différence fondamentale : vous ne touchez JAMAIS au DOM. Vous modifiez les données ; le moteur de détection d'Angular met la vue à jour. Votre defi-todo-list vanilla faisait afficher() à chaque mutation — Angular automatise exactement ce re-rendu.

Le pattern parent/enfant

// liste.html
<app-task-item *ngFor="let t of taches" [task]="t" (bascule)="onBascule($event)" />

@Input descend les données, @Output remonte les événements : flux unidirectionnel explicite. Fini les index capturés par fermeture — chaque item émet son id, le parent décide.

Pourquoi ce framework dans ce cursus

Le programme enseigne Angular pour la même raison qu'il a fait écrire le DOM à la main : comprendre ce que le framework remplace. Après votre todo vanilla, chaque concept Angular trouve son origine :

• composants = vos fonctions afficher() découpées ;
• bindings = vos textContent/classList ;
• services = votre db.js injecté ;
• routing = votre table de routes.

Exercice

1. Créez le composant TaskItem ci-dessus et intégrez-le dans une liste.
2. Ajoutez un champ "nouvelle tâche" avec (submit) qui émet vers le parent.
3. Listez ce que Angular fait à votre place depuis votre version vanilla.

Résumé

• Composant = classe + template + styles, balise réutilisable.
• Interpolation / [prop] / (event) : les trois bindings essentiels.
• Flux descendant de données, ascendant d'événements.