Angular ‐ Signals
- Signals are a new feature that tracks changes in a variable’s value and notifies us reactively when a change occurs.
- Signals provide a new way to capture when a variable undergoes a data change, making the code more reactive
- A signal is a variable + change notification
- A signal is reactive, and is called a "reactive primitive"
- A signal always has a value
- A signal is synchronous
- A signal is not a replacement for RxJS and Observables for asynchronous operations, such as http.get
- Use them in components to track local component state
- Use them in directives
- Use them in a service to share state across components
- Read them in a template to display signal values
- Or use them anywhere else in your code
- The Angular team calls this the golden rule of signal components: "change detection for a component will be scheduled when and only when a signal read in the template notifies Angular that it has changed."
- If a signal is changed, any consumer interested in reading that signal is notified. But the consumer is not given the new value. The next time it's their turn to execute, the consumer reads the current value from the signal.
- If you are familiar with RxJS and Observables, signals are quite different. Signals don't emit values like Observables do. And signals don't require a subscription.
-
The set() method replaces a signal with a new value, metaphorically replacing the contents of the signal box. Pass the new value into the set method.
-
The update() method updates the signal based on its current value. Pass to the update method an arrow function. The arrow function provides the current signal value so you can update it as needed. In the code below, the quantity is doubled.
-
The mutate() method modifies the content of a signal value, not the signal value itself. Use it with arrays to modify array elements, and objects to modify object properties. In the code below, a vehicle's price is increased by 20%.
-
Regardless of how the signal is modified, consumers are notified that the signal was changed. The consumers can then read the new signal value when it's their turn to execute.
-
Oftentimes we have variables in our code that depend on other variables. For example, the total price for an item is the price for that item times the desired quantity of that item. If the user changes the quantity, we want to change the total price. For that, we use computed signals.
-
Define a computed signal by calling the computed creation function. The computed() function creates a new signal that depends on other signals.
-
Pass to the computed function a computation function that performs the desired operation. The operation reads the value of one or more signals to perform its computation.
-
There may be times that you need to run code when a signal changes, and that code has side effects. By side effects I mean code that calls an API or performs another operation not related to the signal. In these cases, you'll use an effect().
-
For example, you want to debug your signals and log out the signal value each time the code reacts to a change to that signal. Calling console.log() is a side effect.
-
To define an effect, call the effect() creation function. Pass to the function the operation to perform. This operation is re-executed every time the code reacts to a change in any dependent signal.
-
An effect should not change the value of any signals. If you need to change a signal based on a change to a dependent signal, use a computed signal instead.
-
You'll find that you won't use effects often. Though they are useful for logging, or calling other external APIs. (But don't use them to work with RxJS and Observables. There will be signal features to convert to and from Observables.)