Dériver un état avec des linked signals

Maintenant que vous avez appris à dériver un état avec des signals computed, vous avez créé un signal computed notificationsEnabled qui suivait automatiquement le statut de l'utilisateur. Mais que se passe-t-il si les utilisateurs veulent désactiver manuellement les notifications, même lorsqu'ils sont en ligne ? C'est là qu'interviennent les linked signals.

Les linked signals sont des signals modifiables qui maintiennent une connexion réactive avec leurs signals sources. Ils sont parfaits pour créer un état qui suit normalement un calcul mais peut être remplacé si nécessaire.

Dans cette activité, vous allez apprendre en quoi linkedSignal() diffère de computed() en transformant le signal computed notificationsEnabled du système de statut utilisateur précédent en un linked signal modifiable.

1. Importer la fonction linkedSignal

   Ajoutez linkedSignal à vos imports existants.

   // Add linkedSignal to existing imports
   import {Component, signal, computed, linkedSignal, ChangeDetectionStrategy} from '@angular/core';

2. Convertir computed en linkedSignal avec la même expression

   Remplacez le signal computed notificationsEnabled par un linkedSignal utilisant exactement la même expression :

   // Previously (from lesson 2):
   // notificationsEnabled = computed(() => this.userStatus() === 'online');
   
   // Now with linkedSignal - same expression, but writable:
   notificationsEnabled = linkedSignal(() => this.userStatus() === 'online');

   L'expression est identique, mais linkedSignal crée un signal modifiable. Il se met toujours à jour automatiquement quand userStatus change, mais vous pouvez aussi le définir manuellement.

3. Ajouter une méthode pour basculer manuellement les notifications

   Ajoutez une méthode pour montrer qu'il est possible d'écrire directement dans les linked signals :

   toggleNotifications() {
     // This works with linkedSignal but would error with computed!
     this.notificationsEnabled.set(!this.notificationsEnabled());
   }

   C'est la différence essentielle : les signals computed sont en lecture seule, alors que les linked signals peuvent être mis à jour manuellement tout en conservant leur connexion réactive.

4. Mettre à jour le template pour contrôler manuellement les notifications

   Mettez à jour votre template pour ajouter un bouton de bascule pour les notifications :

   <div class="status-info">
     <div class="notifications">
       <strong>Notifications:</strong>
       @if (notificationsEnabled()) {
         Enabled
       } @else {
         Disabled
       }
       <button (click)="toggleNotifications()" class="override-btn">
         @if (notificationsEnabled()) {
           Disable
         } @else {
           Enable
         }
       </button>
     </div>
     <!-- existing message and working-hours divs remain -->
   </div>

5. Observer le comportement réactif

   Testez maintenant le comportement :

   1. Changez le statut de l'utilisateur : remarquez que notificationsEnabled se met à jour automatiquement
   2. Basculez manuellement les notifications : cela remplace la valeur calculée
   3. Changez à nouveau le statut : le linked signal se resynchronise avec son calcul

   Cela montre que les linked signals conservent leur connexion réactive même après avoir été définis manuellement !

Excellent ! Vous avez appris les différences essentielles entre les signals computed et les linked signals :

• Signals computed : en lecture seule, toujours dérivés d'autres signals
• Linked signals : modifiables, peuvent être à la fois dérivés ET mis à jour manuellement
• Utilisez computed quand : la valeur doit toujours être calculée
• Utilisez linkedSignal quand : vous avez besoin d'un calcul par défaut qui peut être remplacé

Dans la prochaine leçon, vous apprendrez à gérer des données asynchrones avec des signals !