Lab 13: computed()

📖 Ressources

• Documentation computed()
• Guide Signals

🚀 Code de Départ

step-12-album-wholesale-v21-pre-control-flow

Continuez depuis le résultat du Lab 13. Si vous repartez à zéro, utilisez step-12-album-wholesale-v21-pre-control-flow comme base et complétez d'abord les Labs 11–13.

Dans ce lab, vous allez créer des états dérivés en utilisant les signals computed. Vous implémenterez computed() pour calculer automatiquement des valeurs comme des compteurs et des totaux à partir d'autres signals, en garantissant leur mise à jour réactive lorsque les dépendances changent.

📝 Instructions

Étape 1: Créer un Signal Computed

computed() dérive une valeur à partir d'autres signals:

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

albums = signal<Album[]>([]);
albumCount = computed(() => this.albums().length);

Étape 2: Utiliser dans un Composant

Les signals computed se mettent à jour automatiquement lorsque les dépendances changent:

export class AlbumListComponent {
  albums = toSignal(this.albumService.getAlbums(), { initialValue: [] });

  albumCount = computed(() => this.albums().length);

  totalPrice = computed(() =>
    this.albums().reduce((sum, album) => sum + album.price, 0)
  );
}

Étape 3: Utiliser dans le Template

Appelez les signals computed comme des signals réguliers:

<p>Total Albums: {{ albumCount() }}</p>
<p>Total Price: {{ totalPrice() | currency }}</p>