Creating and updating your first signal

Welcome to the Angular signals tutorial! Signals are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes.

In this activity, you'll learn how to:

• Create your first signal using the signal() function
• Display its value in a template
• Update the signal value using set() and update() methods

Let's build an interactive user status system with signals!

1. Import the signal function

   Import the signal function from @angular/core at the top of your component file.

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

2. Create a signal in your component

   Add a userStatus signal to your component class that is initialized with a value of 'offline'.

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

3. Display the signal value in the template

   Update the status indicator to display the current user status by:

   1. Binding the signal to the class attribute with [class]="userStatus()"
   2. Displaying the status text by replacing ??? with {{ 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>

   Notice how we call the signal userStatus() with parentheses to read its value.

4. Add methods to update the signal

   Add methods to your component that change the user status using the set() method.

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

   The set() method replaces the signal's value entirely with a new value.

5. Wire up the control buttons

   The buttons are already in the template. Now connect them to your methods by adding:

   1. Click handlers with (click)
   2. Disabled states with [disabled] when already in that status

   <!-- 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. Add a toggle method using update()

   Add a toggleStatus() method that switches between online and offline using the update() method.

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

   The update() method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state.

7. Add the toggle button handler

   The toggle button is already in the template. Connect it to your toggleStatus() method:

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

Congratulations! You've created your first signal and learned how to update it using both set() and update() methods. The signal() function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes.

Next, you'll learn how to derive state from signals using computed!