Composants, templates et signaux

Créer un projet Angular

Angular est un framework complet, maintenu par Google, écrit en TypeScript : routeur, formulaires, client HTTP, tests et outil en ligne de commande sont fournis d’origine. On démarre avec l’Angular CLI :

npm install -g @angular/cli   # Node.js 22.22, 24.15 ou 26 (LTS conseillée)
ng new boutique          # questions : feuille de style, rendu serveur, outils d'IA…
cd boutique
ng serve                 # http://localhost:4200, rechargement automatique
ng generate component liste-taches   # raccourci : ng g c liste-taches

Le projet créé aujourd’hui utilise Angular 22.2 avec la version de TypeScript qu’il prend en charge (6.0) ; il fonctionne sans zone.js (détection des changements pilotée par les signaux et les événements) et ses tests unitaires (ng test) tournent avec Vitest. Les fichiers ne portent plus de suffixe : le composant racine est la classe App de src/app/app.ts.

Le point d’entrée src/main.ts démarre l’application avec bootstrapApplication(App, appConfig) ; app.config.ts déclare les fournisseurs globaux (routeur, client HTTP).

Historiquement, les composants étaient regroupés dans des NgModule. Les versions récentes rendent les composants standalone par défaut : chaque composant déclare lui-même ce qu’il utilise dans imports. Vous rencontrerez encore des NgModule dans les projets existants ; le principe des composants reste le même.

Anatomie d’un composant

import { Component, signal, computed } from '@angular/core';

interface Tache { id: number; libelle: string; faite: boolean }

@Component({
  selector: 'app-liste-taches',
  template: `
    <h2>{{ titre }}</h2>
    <ul>
      @for (tache of taches(); track tache.id) {
        <li [class.faite]="tache.faite">
          <input type="checkbox" [checked]="tache.faite" (change)="basculer(tache.id)" />
          {{ tache.libelle }}
        </li>
      } @empty {
        <li>Aucune tâche.</li>
      }
    </ul>
    @if (restantes() > 0) {
      <p>{{ restantes() }} tâche(s) restante(s)</p>
    } @else {
      <p>Tout est fait.</p>
    }
  `,
  styles: `.faite { text-decoration: line-through; }`,
})
export class ListeTaches {
  titre = 'Mes tâches';
  taches = signal<Tache[]>([
    { id: 1, libelle: 'Acheter du pain', faite: false },
    { id: 2, libelle: 'Réviser Angular', faite: true },
  ]);
  restantes = computed(() => this.taches().filter((t) => !t.faite).length);

  basculer(id: number) {
    this.taches.update((liste) =>
      liste.map((t) => (t.id === id ? { ...t, faite: !t.faite } : t)));
  }
}

Le sélecteur app-liste-taches permet d’utiliser le composant dans un autre template : <app-liste-taches />. Le template peut aussi être placé dans un fichier séparé (templateUrl), ce que fait le CLI.

Les liaisons du template

Syntaxe	Sens	Exemple
{{ expr }}	interpolation (texte)	{{ produit.nom }}
[prop]="expr"	propriété, du composant vers le DOM	[disabled]="panierVide()"
(evt)="instr"	événement, du DOM vers le composant	(click)="ajouter()"
[(prop)]="val"	liaison bidirectionnelle	[(ngModel)]="recherche" (avec FormsModule)

Variantes utiles : [class.active]="estActif", [style.width.px]="largeur", [attr.aria-label]="libelle".

Conditions et listes

Les blocs de contrôle @if, @else, @for, @empty et @switch sont la syntaxe moderne (les anciennes directives *ngIf et *ngFor restent courantes dans le code existant). @for exige une expression track : Angular s’en sert pour savoir quel élément du DOM correspond à quelle donnée quand la liste change. Utilisez un identifiant stable (track tache.id).

Les signaux

Un signal est une valeur réactive : on la lit en l’appelant (taches()), on la modifie avec set(nouvelle) ou update(fn). Angular sait quels templates lisent quels signaux et met à jour uniquement ce qui en dépend. computed() dérive une valeur d’autres signaux, recalculée seulement quand ils changent. Comme avec tout état, on remplace les tableaux et objets par de nouvelles valeurs plutôt que de les modifier sur place.

Communiquer : input() et output()

@Component({
  selector: 'app-carte-produit',
  template: `
    <h3>{{ nom() }}</h3>
    <button (click)="ajouter.emit(id())">Ajouter</button>
  `,
})
export class CarteProduit {
  id = input.required<number>();
  nom = input.required<string>();
  ajouter = output<number>();
}

Le parent écrit : <app-carte-produit [id]="p.id" [nom]="p.nom" (ajouter)="onAjouter($event)" />. Le composant parent doit importer CarteProduit dans son tableau imports. Les décorateurs @Input() et @Output() jouent le même rôle dans le code plus ancien.

Les pipes

Un pipe transforme une valeur pour l’affichage : {{ prix | currency:'EUR' }}, {{ date | date:'dd/MM/yyyy' }}. Un pipe personnalisé est une classe avec une méthode transform ; c’est une fonction pure, idéale pour un test.

À retenir

Classe + décorateur + template ; [ ] vers le DOM, ( ) depuis le DOM ; @for avec track ; signaux lus en les appelant ; input()/output() pour communiquer.