Signals

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

// Deux compteurs pour voir quels templates Angular reevalue.
export const evaluations = { entete: 0, badge: 0 };

@Component({
  selector: 'app-badge',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<span>{{ libelle() }}</span>`,
})
export class Badge {
  readonly nonLus = signal(0);

  // Une methode appelee depuis le template s'execute a chaque reevaluation de
  // la vue ; le signal qu'elle lit n'en est pas moins suivi.
  protected libelle(): string {
    evaluations.badge++;
    return this.nonLus() + ' non lus';
  }
}

@Component({
  selector: 'app-entete',
  imports: [Badge],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<h1>{{ titre() }}</h1><app-badge />`,
})
export class Entete {
  protected titre(): string {
    evaluations.entete++;
    return 'Messagerie';
  }
}

// Premier rendu              : entete 1, badge 1
// badge.nonLus.set(5), rendu : entete 1, badge 2, et l'ecran affiche « 5 non lus »
//
// Seule la vue qui lit nonLus est reevaluee ; l'en-tete, qui la contient, ne
// l'est pas. La strategie Default de l'ere Zone.js aurait relu les deux
// templates, et avec eux tous ceux de l'application.

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

interface Ligne {
  readonly reference: string;
  readonly prix: number;
}

@Component({
  selector: 'app-panier',
  templateUrl: './panier.html',
  // La valeur par defaut depuis Angular 22 : l'ecrire ne change rien, sinon
  // que le lecteur n'a pas a s'en souvenir.
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Panier {
  // Un signal est une valeur dans une boite, qu'on lit en l'appelant.
  // protected le reserve a la classe, a ses sous-classes et a son template.
  protected readonly lignes = signal<readonly Ligne[]>([]);
  protected readonly compteur = signal(0);

  // Un computed se derive d'autres signals. Il est en lecture seule (pas de
  // set), calcule a la premiere lecture, puis garde en cache tant qu'aucune
  // de ses sources ne change.
  protected readonly total = computed(() =>
    this.lignes().reduce((somme, ligne) => somme + ligne.prix, 0),
  );
  protected readonly estVide = computed(() => this.lignes().length === 0);

  protected ajouter(reference: string, prix: number): void {
    // update part de la valeur courante. Le tableau est remplace, jamais
    // modifie en place : un push sur le meme tableau garderait la meme
    // reference, et un signal compare par reference (Object.is).
    this.lignes.update((lignes) => [...lignes, { reference, prix }]);
    this.compteur.update((n) => n + 1);
  }

  protected vider(): void {
    // set remplace la valeur sans regarder l'ancienne. Le compteur, lui,
    // n'est pas une derivee du panier : il compte les ajouts depuis
    // l'ouverture, et vider ne le remet pas a zero.
    this.lignes.set([]);
  }
}

<!-- Chaque signal lu ici fait de la vue une consommatrice de ce signal :
     c'est lui, et non un balayage, qui dira a Angular de la rafraichir. -->
<p>Articles ajoutes : {{ compteur() }}</p>

@if (estVide()) {
  <p>Le panier est vide.</p>
} @else {
  <ul>
    @for (ligne of lignes(); track $index) {
      <li>{{ ligne.reference }} : {{ ligne.prix }} €</li>
    }
  </ul>
  <p>Total : {{ total() }} €</p>
  <button type="button" (click)="vider()">Vider</button>
}

<button type="button" (click)="ajouter('USB-64', 12)">Ajouter une cle USB</button>

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

const afficherRemise = signal(false);
const prix = signal(100);
const remise = signal(10);

let evaluations = 0;

const libelle = computed(() => {
  evaluations++;

  // remise n'est lue que dans la premiere branche. Tant que la condition est
  // fausse, elle n'est pas une dependance de libelle : le graphe ne contient
  // que ce que la derniere execution a reellement lu.
  return afficherRemise() ? `${prix() - remise()} € (remise ${remise()} €)` : `${prix()} €`;
});

console.log(libelle(), evaluations); // 100 € 1

remise.set(20);
console.log(libelle(), evaluations); // 100 € 1 : rien n'a ete recalcule

afficherRemise.set(true);
console.log(libelle(), evaluations); // 80 € (remise 20 €) 2

// La branche est lue, remise vient d'entrer dans le graphe.
remise.set(30);
console.log(libelle(), evaluations); // 70 € (remise 30 €) 3

// Et elle en ressort des qu'elle n'est plus lue.
afficherRemise.set(false);
remise.set(40);
console.log(libelle(), evaluations); // 100 € 4 : une seule evaluation pour deux ecritures

<!-- Le template est lui aussi un contexte reactif, avec la meme regle : seul ce
     qui a ete lu au dernier rendu est suivi. Tant que connecte() est faux,
     utilisateur() n'est jamais lu, et le changer ne rafraichit pas la vue. -->
@if (connecte()) {
  <p>Bonjour {{ utilisateur().nom }}</p>
} @else {
  <p>Connectez-vous.</p>
}

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

// 1. Une mutation en place ne notifie personne.
const references = signal(['USB-64', 'HDMI-2']);
const nombre = computed(() => references().length);

console.log(nombre()); // 2

references().push('DP-14');
references.set(references()); // meme tableau : Object.is le juge inchange
console.log(nombre()); // 2 : le tableau en contient trois, le computed l'ignore

references.update((liste) => [...liste, 'VGA-1']); // nouvelle reference
console.log(nombre()); // 4

// 2. untracked lit sans s'abonner.
const quantite = signal(2);
const tauxTva = signal(20);
let evaluations = 0;

const montant = computed(() => {
  evaluations++;
  return (quantite() * 10 * (100 + untracked(tauxTva))) / 100;
});

console.log(montant(), evaluations); // 24 1

tauxTva.set(10);
console.log(montant(), evaluations); // 24 1 : le taux n'est pas une dependance

quantite.set(3);
console.log(montant(), evaluations); // 33 2 : relu au passage, le taux vaut bien 10

// 3. Une valeur qui ne change pas arrete la propagation.
const stock = signal(7);
const enRupture = computed(() => stock() === 0);
let rendus = 0;
const bandeau = computed(() => {
  rendus++;
  return enRupture() ? 'Rupture' : 'En stock';
});

console.log(bandeau(), rendus); // En stock 1
stock.set(6);
console.log(bandeau(), rendus); // En stock 1 : enRupture est recalcule, reste false,
//                                 et bandeau n'est pas reevalue

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

interface Commande {
  readonly numero: number;
  readonly montant: number;
}

@Component({
  selector: 'app-commandes',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (commande of commandes(); track commande.numero) {
      <p>{{ commande.numero }} : {{ commande.montant }} €</p>
    }
  `,
})
export class Commandes {
  readonly commandes = signal<readonly Commande[]>([
    { numero: 3, montant: 40 },
    { numero: 1, montant: 15 },
    { numero: 2, montant: 90 },
  ]);

  constructor() {
    // « Garder la liste triee. » L'effect lit commandes, donc en depend, puis
    // ecrit dans commandes. Le tri rend un nouveau tableau a chaque passage,
    // qu'Object.is juge different du precedent meme quand l'ordre n'a pas
    // bouge : l'ecriture invalide l'effect, qui repasse, reecrit, repasse...
    // Aucune erreur ne vient l'arreter : Angular relance les effects sales
    // d'une vue tant qu'il en reste, sans plafond, et l'onglet se fige.
    effect(() => {
      this.commandes.set([...this.commandes()].sort((a, b) => a.numero - b.numero));
    });
  }
}

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

interface Commande {
  readonly numero: number;
  readonly montant: number;
}

@Component({
  selector: 'app-commandes',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (commande of commandesTriees(); track commande.numero) {
      <p>{{ commande.numero }} : {{ commande.montant }} €</p>
    }
  `,
})
export class Commandes {
  // La source reste telle qu'elle arrive.
  readonly commandes = signal<readonly Commande[]>([
    { numero: 3, montant: 40 },
    { numero: 1, montant: 15 },
    { numero: 2, montant: 90 },
  ]);

  // La vue lit une derivee. Rien n'est ecrit, donc rien ne boucle ; le tri
  // n'est refait que lorsque commandes change, et seulement si quelqu'un lit
  // le resultat. Il n'existe plus deux versions de la liste a tenir d'accord.
  readonly commandesTriees = computed(() =>
    [...this.commandes()].sort((a, b) => a.numero - b.numero),
  );
}

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

@Component({
  selector: 'app-brouillon',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<textarea #zone [value]="texte()" (input)="texte.set(zone.value)"></textarea>`,
})
export class Brouillon {
  readonly texte = signal(localStorage.getItem('brouillon') ?? '');

  constructor() {
    // Le cas d'ecole : recopier un signal vers une API qui n'en est pas un.
    // effect n'est permis que dans un contexte d'injection (ici le
    // constructeur) et il est detruit avec le composant.
    effect((onCleanup) => {
      const texte = this.texte();

      // Rien n'est ecrit tant que la frappe continue : chaque nouvelle valeur
      // relance l'effect, et onCleanup annule d'abord le minuteur de la
      // precedente. Il est aussi appele a la destruction du composant.
      const minuteur = setTimeout(() => localStorage.setItem('brouillon', texte), 500);
      onCleanup(() => clearTimeout(minuteur));
    });
  }
}

import { ChangeDetectionStrategy, Component, input, linkedSignal } from '@angular/core';

interface Produit {
  readonly reference: string;
  readonly libelle: string;
}

@Component({
  selector: 'app-liste-produits',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (produit of produits(); track produit.reference) {
      <button
        type="button"
        [class.actif]="produit.reference === selection()?.reference"
        (click)="selection.set(produit)"
      >
        {{ produit.libelle }}
      </button>
    }
    <p>Selection : {{ selection()?.libelle ?? 'aucune' }}</p>
  `,
})
export class ListeProduits {
  // La liste vient du parent : le composant ne la possede pas.
  readonly produits = input.required<readonly Produit[]>();

  // La selection, elle, est un etat local qu'on ecrit au clic, mais qui doit
  // suivre la source. Un computed ne s'ecrit pas ; un signal ne se realigne
  // pas. linkedSignal est les deux : ecrivable, et recalcule quand source
  // change.
  readonly selection = linkedSignal<readonly Produit[], Produit | undefined>({
    source: this.produits,
    // precedent porte l'ancienne source et l'ancienne valeur, y compris celle
    // posee par set. On garde le choix de l'utilisateur tant qu'il existe
    // encore dans la nouvelle liste ; sinon, on retombe sur le premier.
    computation: (produits, precedent) =>
      produits.find((p) => p.reference === precedent?.value?.reference) ?? produits[0],
  });
}

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

interface Produit {
  readonly reference: string;
  readonly libelle: string;
}

@Component({
  selector: 'app-recherche',
  templateUrl: './recherche.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Recherche {
  readonly terme = signal('');

  readonly donnees = resource({
    // params est suivi comme un computed : chaque nouvelle valeur relance le
    // chargement. Rendre undefined laisse la resource au repos (statut
    // 'idle') sans appeler le loader.
    params: () => {
      const terme = this.terme().trim();
      return terme.length >= 2 ? terme : undefined;
    },

    // Le loader recoit la valeur de params, jamais undefined. Si params change
    // pendant qu'il travaille, abortSignal est declenche et le resultat de
    // l'ancien appel n'arrivera jamais dans value.
    loader: async ({ params, abortSignal }) => {
      const reponse = await fetch(`/api/produits?q=${encodeURIComponent(params)}`, {
        signal: abortSignal,
      });
      if (!reponse.ok) {
        throw new Error(`Recherche impossible (${reponse.status})`);
      }
      return (await reponse.json()) as Produit[];
    },

    // Sans valeur par defaut, value serait Produit[] | undefined.
    defaultValue: [],
  });
}

<input #champ type="search" [value]="terme()" (input)="terme.set(champ.value)" />

<!-- L'erreur se teste avant la valeur : en statut 'error', lire value()
     leve une exception au lieu de rendre la valeur par defaut. -->
@if (donnees.isLoading()) {
  <p>Recherche en cours...</p>
} @else if (donnees.error(); as erreur) {
  <p>{{ erreur.message }}</p>
  <button type="button" (click)="donnees.reload()">Reessayer</button>
} @else {
  @for (produit of donnees.value(); track produit.reference) {
    <p>{{ produit.reference }} : {{ produit.libelle }}</p>
  } @empty {
    <p>Aucun resultat.</p>
  }
}

import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    // Depuis Angular 21, c'est deja le fonctionnement par defaut d'une
    // application : cette ligne le rend explicite, elle ne l'active pas.
    // Ce qu'elle remplace, c'est provideZoneChangeDetection(), qu'il faut
    // chercher et retirer dans une application migree, avec zone.js dans les
    // polyfills d'angular.json et la dependance zone.js du package.json.
    provideZonelessChangeDetection(),

    // Zone.js renvoyait a l'ErrorHandler les erreurs nees dans sa zone, meme
    // dans un setTimeout. Sans lui, elles remontent a window : ce fournisseur,
    // que le CLI ajoute aux nouvelles applications, ecoute 'error' et
    // 'unhandledrejection' et les fait suivre a l'ErrorHandler.
    provideBrowserGlobalErrorListeners(),

    provideRouter(routes),
  ],
};

import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';

@Component({
  selector: 'app-horloge',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Ouvert depuis {{ secondes }} s</p>`,
})
export class Horloge {
  secondes = 0;

  constructor() {
    // Sous Zone.js, ce code ne marchait qu'en strategie Default : le tick
    // declenche par le setInterval parcourait l'arbre, mais sautait les
    // composants OnPush non marques. Depuis Angular 22, OnPush par defaut et
    // l'absence de Zone.js le condamnent chacun de son cote. Un champ
    // ordinaire qui change ne previent personne : l'ecran reste sur « 0 s »
    // alors que le champ, lui, avance, et aucune erreur ne le signale.
    const minuteur = setInterval(() => this.secondes++, 1000);
    inject(DestroyRef).onDestroy(() => clearInterval(minuteur));
  }
}

import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';

@Component({
  selector: 'app-horloge',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Ouvert depuis {{ secondes() }} s</p>`,
})
export class Horloge {
  readonly secondes = signal(0);

  constructor() {
    // L'ecriture dans un signal lu par le template est une notification : elle
    // marque cette vue a rafraichir et planifie une detection de changements,
    // qui ne passera que sur ce qui a ete marque.
    const minuteur = setInterval(() => this.secondes.update((s) => s + 1), 1000);
    inject(DestroyRef).onDestroy(() => clearInterval(minuteur));
  }
}