Angular
Réactivité

Les méthodes set() et update()

Un Signal ne se modifie pas avec un simple signe égal (=). Angular vous donne deux outils puissants pour le manipuler : set() pour l'écraser, et update() pour le transformer.

Exemple 1 : Nombres

On utilise surtout update() pour les calculs mathématiques.

0

Exemple 2 : Textes

On manipule le texte en direct.

La méthode set()

Écrase complètement la valeur précédente. Elle ne s'intéresse pas à ce qu'il y avait avant.

// Je mets mon compteur à zéro peu importe sa valeur
this.counter.set(0);
La méthode update()

Prend l'ancienne valeur, la modifie dans une fonction, puis sauvegarde le résultat. Idéal pour incrémenter !

// Je prends (val), j'ajoute 1, ça devient ma nouvelle valeur
this.counter.update((val) => val + 1);

Le Code Source Complet

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

@Component({
  selector: 'app-counter',
  template: `
    <p>Compteur : {{ counter() }}</p>
    <button (click)="resetCounter()">Réinitialiser</button>
    <button (click)="incrementCounter()">Incrémenter</button>
  `
})
export class SignalMethodsComponent {
  counter = signal(0); 
  nom = signal('angular'); 

  // --- SET (Écrase la valeur) ---
  resetCounter() {
    this.counter.set(0); 
  }

  resetNom() {
    this.nom.set(''); 
  }

  // --- UPDATE (Modifie par rapport à l'ancienne valeur) ---
  incrementCounter() {
    // On reçoit "value" (l'ancien chiffre) et on retourne le nouveau
    this.counter.update((value) => value + 1); 
  }

  upperCaseNom() {
    // On reçoit "text" (l'ancienne chaine) et on la met en majuscules
    this.nom.update((text) => text.toUpperCase());
  }
}