Use signal() to create writable state in an Angular component, call the signal to read its current value, and change it with .set() or .update(). The example below displays a user status and lets a reader set or toggle it.
Create a writable signal
Import signal from @angular/core and initialize it in your component. This example limits the status to two valid strings:
As an Amazon Associate I earn from qualifying purchases.
import {Component, signal} from '@angular/core';
@Component({
selector: 'app-root',
template: `
Status: {{ userStatus() }}
`,
})
export class App {
userStatus = signal<'online' | 'offline'>('offline');
goOnline() {
this.userStatus.set('online');
}
toggleStatus() {
this.userStatus.update(current => current === 'online' ? 'offline' : 'online');
}
}signal<'online' | 'offline'>('offline') creates a writable signal whose initial value is 'offline'. The type annotation restricts later values to 'online' or 'offline'. Angular’s tutorial describes signals as a reactive primitive for managing state and automatically updating the UI when that state changes.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRead the signal in the template
Call the signal to get its current value: {{ userStatus() }}. A signal is callable; using userStatus without parentheses refers to the signal itself, not the value you want to display. Angular tracks signal reads in templates. When a signal read in an OnPush component template changes, Angular marks that component for an update during change detection.
#1 Best Overall
Choose between .set() and .update()
Both methods write to the same writable signal. Choose based on how you know the next value:
| Method | Use it when | Example |
|---|---|---|
.set(value) |
The replacement value is already known. | this.userStatus.set('online') |
.update(fn) |
The next value should be calculated from the current value. | this.userStatus.update(current => current === 'online' ? 'offline' : 'online') |
Replace the value with .set()
The goOnline() method supplies a specific value, so it uses .set('online'). In the template, (click)="goOnline()" connects the button click to that component method.
Derive the next value with .update()
The toggle method needs to inspect the current status before choosing the next one. Its callback receives the current value as current and returns the replacement value. The template’s (click)="toggleStatus()" binding calls that method when the button is clicked.
Keep writable and derived state distinct
signal() creates writable state that you can change with .set() or .update(). By contrast, Angular’s computed() creates read-only derived state; you do not change a computed signal directly with those write methods. See Angular’s signals essentials and signals guide for more on reads, writes, computed values, and template consumers.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
