Angular
Réactivité

Signal & Computed()

Un Signal est une variable "magique" qui prévient Angular quand elle change.
Un Computed est un calcul automatique basé sur un ou plusieurs signaux.

Votre Panier
1
AVEC COMPUTED()
Total Dynamique
Se met à jour tout seul instantanément

100 €

SANS COMPUTED (Statique)
Total Cassé
Il a été calculé une fois, puis oublié...

100 €

Comment ça marche ?

computed() est comme une formule magique dans Excel. Si on dit que la cellule C dépend de la cellule A et B, dès que A ou B changent, C se recalcule tout seul !

// 1. On crée les signaux (les variables de base)
price = signal(100);
quantity = signal(1);

// 2. On crée le computed (la formule magique)
total = computed(() => this.price() * this.quantity());

Le Code Source Complet

computed-example.component.ts
import { Component, computed, signal } from '@angular/core';

@Component({
  selector: 'app-price-calculator',
  template: `
    <div>
      Prix: <input [ngModel]="price()" (ngModelChange)="price.set($event)" type="number">
      
      <!-- L'appel d'un signal ou d'un computed se fait avec des parenthèses () -->
      <p>Total Magique : {{ totalWithComputed() }} €</p>
      <p>Total Cassé : {{ totalWithoutComputed }} €</p>
    </div>
  `
})
export class CalculatorComponent {
  // Déclaration de nos 2 signaux
  price = signal(100); 
  quantity = signal(1); 
  
  // Computed : Angular sait qu'il doit recalculer ça si 'price' ou 'quantity' change !
  totalWithComputed = computed(() => this.price() * this.quantity()); 
  
  // Statique : Ce calcul n'est fait qu'une seule fois au lancement de la page.
  totalWithoutComputed = this.price() * this.quantity();
}