An Angular signal holds a value and helps Angular track how that value relates to other values. These relationships let Angular respond to a state change without reevaluating unaffected template expressions. In Angular 16, signals are a developer-preview feature: they can be used in projects, but their API may change and they are not yet fully integrated with the framework. section 10.4 section 10.6
Use the functions from @angular/core to define the relationship between state and derived values:
- signal(initialValue) creates a writable signal. Supply a TypeScript type argument if needed, or let the initial value determine it. Read the value by calling the signal, such as selectedCategory(). Use set to replace it, update to derive a new value from the current one, or mutate to change the current value in place; assignment does not update a signal. section 10.4.1
- computed(() => ...) creates a read-only signal from signals read inside its function. Angular tracks those dependencies and caches the result until an underlying signal changes. section 5.3.3 section 5.5.2
- effect(() => ...) runs a function when signals it uses change. Use asReadonly() when other code should read a writable signal without changing it directly. section 10.4 section 10.4.4
Filter products by category
Keep the selected category in signal<string | undefined>(undefined), where undefined means all products. Define products with computed(() => ...) so it reads both the selection and the repository’s product signal, filtering only when a category is selected. A category button calls changeCategory(cat); the template reads categories(), selectedCategory(), and products(). Changing the selection invalidates the cached product list, which is recomputed when next read. section 5.5.2
Signals need not live in components. A cart can keep its writable lines signal private, expose lines through asReadonly(), and compute item count and price from the lines. A repository or message service can use the same pattern to control updates while sharing readable state. Watch the boundary with ordinary properties: changing a route-driven @Input does not, by itself, recalculate a computed signal. Copy that change into a signal in ngOnChanges when the computed value depends on it. section 6.2.1 section 25.4.2
Table 10.4. The writable signal methods
|
Name
|
Description
|
|
set
|
This method accepts a new value for the signal
|
|
update
|
This method accepts a function that receives the current signal value and returns a new value.
|
|
mutate
|
This method accepts a function that receives the current signal value and modifies it in place.
|
|
asReadonly
|
This method returns a
Signal<T> object, which provides a read-only version of the signal, as demonstrated in the “Working with Reactive Extensions” section.
|
Compare set, update, mutate, and asReadonly before choosing how to change or expose a writable signal. section 10.4.1
