Angular Academy · Leçon

Dériver l’état avec computed

Construisez des modèles de lecture à partir de l’état de base

Dériver l’état avec computed est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

État dérivé

Souvent, l’état est calculé à partir d’un autre état : un total à partir d’éléments, une liste filtrée ou un indicateur de validité. Le computed() d’Angular crée un signal en lecture seule dont la valeur est dérivée d’autres signaux.

Créer un computed

Passez une fonction à computed(). Elle lit d’autres signaux et renvoie une valeur. Le résultat est recalculé uniquement lorsqu’une de ses dépendances change.

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

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

Suivi automatique des dépendances

Vous ne déclarez jamais les dépendances. Tous les signaux lus dans la fonction deviennent automatiquement des dépendances. Modifiez qty et total est recalculé ; modifiez un signal sans rapport et rien ne se produit.

Mémorisation

computed() met son résultat en cache. Le lire plusieurs fois n’exécute la fonction qu’une seule fois, jusqu’à ce qu’une dépendance change. Les modèles de lecture dérivés restent ainsi peu coûteux, même lorsqu’ils sont utilisés dans de nombreuses liaisons de modèle.

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

computed dans un magasin

Dans un magasin de signaux, exposez des modèles de lecture calculés afin que les composants utilisent des valeurs prêtes à afficher au lieu de les recalculer dans les modèles.

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

Chaîner les computed

Les signaux calculés peuvent lire d’autres signaux calculés. Construisez des modèles de lecture en couches : une dérivation de base alimente une dérivation de niveau supérieur.

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

Filtrer et rechercher

Un modèle de lecture courant consiste à filtrer une liste à l’aide d’un signal de recherche. Le résultat filtré est mis à jour chaque fois que la liste ou la requête change.

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

Aucun effet secondaire

Une fonction computed() doit être pure : elle lit uniquement des signaux et renvoie une valeur. Ne modifiez pas l’état, n’appelez pas d’API et n’écrivez pas dans d’autres signaux à l’intérieur. Pour les effets secondaires, utilisez plutôt effect().

Égalité et omission des mises à jour

Par défaut, computed utilise l’égalité référentielle (Object.is) pour déterminer si la valeur a changé. Si la nouvelle valeur est égale à l’ancienne, les utilisateurs ne sont pas avertis, ce qui évite du travail inutile.

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

Utiliser computed dans les modèles

Lisez les signaux calculés dans les modèles comme n’importe quel signal. Angular ne met à jour que les liaisons dont la valeur calculée a réellement changé.

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computed ou méthodes

Utilisez computed() pour les valeurs dérivées de l’état qui doivent être mises à jour automatiquement et mémorisées. Utilisez une méthode ordinaire pour les calculs ponctuels qui prennent des arguments ou doivent être exécutés à la demande.

Vérification rapide

Vérifiez votre compréhension des signaux calculés.

Récapitulatif

Vous avez créé un état dérivé avec computed() : suivi automatique des dépendances, fonctions pures mémorisées, modèles de lecture chaînables et mises à jour omises grâce à l’égalité. Exposez les modèles de lecture calculés depuis les magasins afin que les modèles restent déclaratifs.

Questions Fréquemment Posées

La leçon « Dériver l’état avec computed » est-elle gratuite ?

Oui — le texte complet de « Dériver l’état avec computed » 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 « Dériver l’état avec computed » ?

Construisez des modèles de lecture à partir de l’état de base 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 2 sur 4.

Combien de temps prend la leçon « Dériver l’état avec computed » ?

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

Magasins de signaux dans les services
Dériver l’état avec computed
Mettre à jour l’état de manière immuable
Relier les signaux et RxJS

← Retour à Angular Academy