Créer et mettre à jour votre premier signal

Bienvenue dans le tutoriel sur les signals Angular ! Les signals sont la primitive réactive d'Angular : ils permettent de gérer l'état et de mettre à jour automatiquement votre interface quand cet état change.

Dans cette activité, vous allez apprendre à :

• Créer votre premier signal avec la fonction signal()
• Afficher sa valeur dans un template
• Mettre à jour la valeur du signal avec les méthodes set() et update()

Construisons un système interactif de statut utilisateur avec des signals !

1. Importer la fonction signal

   Importez la fonction signal depuis @angular/core en haut du fichier de votre composant.

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

2. Créer un signal dans votre composant

   Ajoutez à la classe de votre composant un signal userStatus initialisé avec la valeur 'offline'.

   @Component({
     /* Config omitted */
   })
   export class App {
     userStatus = signal<'online' | 'offline'>('offline');
   }

3. Afficher la valeur du signal dans le template

   Mettez à jour l'indicateur de statut pour afficher le statut actuel de l'utilisateur :

   1. Créez un binding du signal sur l'attribut class avec [class]="userStatus()"
   2. Affichez le texte du statut en remplaçant ??? par {{ userStatus() }}

   <!-- Update from: -->
   <div class="status-indicator offline">
     <span class="status-dot"></span>
     Status: ???
   </div>
   
   <!-- To: -->
   <div class="status-indicator" [class]="userStatus()">
     <span class="status-dot"></span>
     Status: {{ userStatus() }}
   </div>

   Remarquez que nous appelons le signal userStatus() avec des parenthèses pour lire sa valeur.

4. Ajouter des méthodes pour mettre à jour le signal

   Ajoutez à votre composant des méthodes qui changent le statut de l'utilisateur avec la méthode set().

   goOnline() {
     this.userStatus.set('online');
   }
   
   goOffline() {
     this.userStatus.set('offline');
   }

   La méthode set() remplace entièrement la valeur du signal par une nouvelle valeur.

5. Brancher les boutons de contrôle

   Les boutons sont déjà présents dans le template. Connectez-les maintenant à vos méthodes en ajoutant :

   1. Des gestionnaires de clic avec (click)
   2. Des états désactivés avec [disabled] quand l'utilisateur a déjà ce statut

   <!-- Add bindings to the existing buttons: -->
   <button (click)="goOnline()" [disabled]="userStatus() === 'online'">Go Online</button>
   <button (click)="goOffline()" [disabled]="userStatus() === 'offline'">Go Offline</button>

6. Ajouter une méthode de bascule avec update()

   Ajoutez une méthode toggleStatus() qui bascule entre online et offline avec la méthode update().

   toggleStatus() {
     this.userStatus.update(current => current === 'online' ? 'offline' : 'online');
   }

   La méthode update() prend une fonction qui reçoit la valeur actuelle et renvoie la nouvelle valeur. C'est utile quand vous devez modifier la valeur existante en fonction de son état actuel.

7. Ajouter le gestionnaire du bouton de bascule

   Le bouton de bascule est déjà présent dans le template. Connectez-le à votre méthode toggleStatus() :

   <button (click)="toggleStatus()" class="toggle-btn">Toggle Status</button>

Félicitations ! Vous avez créé votre premier signal et appris à le mettre à jour avec les méthodes set() et update(). La fonction signal() crée une valeur réactive qu'Angular suit, et quand vous la mettez à jour, votre interface reflète automatiquement les changements.

Ensuite, vous apprendrez à dériver un état à partir de signals avec computed !