Angular Academy · Leçon

Signaux calculés

Déduisez des valeurs qui se mettent à jour automatiquement.

Signaux calculés est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Qu’est-ce qu’un signal calculé

Un signal computed() dérive une valeur d’un ou plusieurs autres signaux. Chaque fois qu’un signal source change, la valeur calculée est recalculée paresseusement — uniquement lorsqu’un élément la lit.

Les signaux calculés sont en lecture seule : vous ne pouvez pas appeler .set() sur eux.

Créer un computed

Vous passez une fonction à computed(). Angular suit automatiquement chaque signal que vous lisez à l’intérieur.

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

Suivi automatique des dépendances

Vous ne déclarez jamais les dépendances manuellement. La lecture de price() et de quantity() dans la fonction de rappel les enregistre automatiquement comme dépendances.

Si un signal est lu de manière conditionnelle et que cette branche n’est pas atteinte, il n’est pas suivi lors de cette exécution.

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

Évaluation paresseuse et mémorisation

Un computed ne s’exécute que lorsqu’il est lu et met son résultat en cache. Si vous le lisez deux fois sans modification des sources, la fonction ne s’exécute qu’une fois.

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Chaîner des signaux calculés

Les signaux calculés peuvent dépendre d’autres signaux calculés, formant ainsi un graphe réactif.

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

Utiliser computed dans un composant

Les signaux calculés sont particulièrement utiles dans les composants. Le modèle n’est rendu à nouveau que lorsque la valeur calculée change réellement.

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Les computed sont en lecture seule

Essayer de définir un signal calculé provoque une erreur à la compilation. Ils servent uniquement à exprimer un état dérivé.

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

Égalité et recalculs évités

Par défaut, un computed utilise Object.is pour comparer les valeurs. Si la nouvelle valeur calculée est égale à l’ancienne, les dépendants ne sont pas notifiés, ce qui évite du travail inutile.

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

Fonction d’égalité personnalisée

Vous pouvez passer une option equal pour contrôler le moment où un computed est considéré comme modifié — ce qui est utile pour les objets ou les tableaux.

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

Éviter les effets secondaires dans computed

Un computed doit être pur : aucun appel HTTP, aucune journalisation utilisée comme comportement, aucune modification d’autres signaux. Les effets secondaires doivent être placés dans effect(). Garder les computed purs rend le graphe réactif prévisible.

Computed et méthodes

Une méthode du modèle s’exécute à chaque cycle de détection des changements. Un computed ne s’exécute que lorsque ses dépendances changent et met son résultat en cache — ce qui est bien plus efficace pour les valeurs dérivées.

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

Vérification rapide

Testez votre compréhension des signaux calculés.

Récapitulatif : signaux calculés

Vous avez appris que computed() crée des signaux dérivés en lecture seule avec un suivi automatique des dépendances, une évaluation paresseuse et une mémorisation.

Gardez-les purs — sans effets secondaires.
Ils peuvent dépendre d’autres signaux calculés.
Utilisez equal pour une détection personnalisée des changements.

Ensuite : exécuter des effets secondaires avec effect().

Questions Fréquemment Posées

La leçon « Signaux calculés » est-elle gratuite ?

Oui — le texte complet de « Signaux calculés » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Signaux calculés » ?

Déduisez des valeurs qui se mettent à jour automatiquement. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Signaux calculés » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy