0Pricing
Angular Academy · Leçon

Mettre à jour les signaux avec set et update

Modifiez les valeurs des signaux de manière réactive.

Mettre à jour les signaux avec set et update est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Modifier un signal

Un signal modifiable peut être changé de deux façons : set() remplace la valeur et update() calcule une nouvelle valeur à partir de la valeur actuelle.

Utiliser set()

set(newValue) remplace entièrement la valeur du signal par celle que vous lui transmettez.

const c = signal(0);
c.set(1);
console.log(c()); // 1

Quand utiliser set()

Utilisez set() lorsque la nouvelle valeur ne dépend pas de l’ancienne, par exemple pour affecter une nouvelle valeur provenant d’une entrée utilisateur ou d’une réponse d’API.

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

Utiliser update()

update(fn) reçoit une fonction qui accepte la valeur actuelle et renvoie la nouvelle valeur. Cette méthode est idéale lorsque la valeur suivante dépend de la précédente.

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

Incrémenter avec update()

Le compteur classique utilise update() pour s’incrémenter à partir de la valeur actuelle.

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

Mettre à jour les objets de manière immuable

Comme la détection des changements compare les références, remplacez les objets au lieu de les modifier directement. Recopiez l’ancienne valeur dans un nouvel objet à l’aide de la syntaxe de décomposition.

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

Mettre à jour les tableaux de manière immuable

Pour les tableaux, renvoyez un nouveau tableau. Évitez d’utiliser push/splice sur le tableau existant ; utilisez la syntaxe de décomposition ou des méthodes de tableau qui renvoient de nouveaux tableaux.

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

Résumé : set() ou update()

set : vous disposez déjà de la valeur finale. update : vous calculez la valeur finale à partir de la valeur actuelle. Les deux méthodes notifient les consommateurs si la valeur change réellement.

Égalité des références et changements

Par défaut, les signaux utilisent l’égalité des références (ou des valeurs, pour les primitives) pour déterminer si quelque chose a changé. Définir un signal sur exactement la même valeur primitive ne déclenche aucune notification des éléments qui en dépendent.

const c = signal(5);
c.set(5); // no change, dependents not notified

La modification directe est déconseillée

Les anciennes API possédaient une méthode mutate(), mais l’approche moderne recommandée consiste à effectuer des mises à jour immuables avec set() et update(), en renvoyant de nouvelles références.

Mettre à jour les signaux dans des méthodes

Dans les composants, regroupez les mises à jour des signaux dans des méthodes que le modèle peut appeler depuis les gestionnaires d’événements.

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

Vérification rapide : set ou update

Choisissez l’outil adapté à la tâche.

Récapitulatif : mise à jour des signaux

Vous avez appris à utiliser set() pour remplacer une valeur et update(fn) pour dériver une nouvelle valeur à partir de la valeur actuelle. Vous avez également vu comment mettre à jour des objets et des tableaux de manière immuable afin que l’égalité des références détecte la modification. Ensuite : utiliser directement les signaux dans les modèles.

Questions Fréquemment Posées

La leçon « Mettre à jour les signaux avec set et update » est-elle gratuite ?

Oui — le texte complet de « Mettre à jour les signaux avec set et update » 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 « Mettre à jour les signaux avec set et update » ?

Modifiez les valeurs des signaux de manière réactive. 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 3 sur 4.

Combien de temps prend la leçon « Mettre à jour les signaux avec set et update » ?

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

  1. Que sont les signaux
  2. Créer et lire des signaux
  3. Mettre à jour les signaux avec set et update
  4. Signaux dans les modèles
← Retour à Angular Academy