Signals were introduced as a developer preview in Angular 16. Now in Angular 19, Signals API was finalized and marked as stable, making it fully supported for use in production applications.
Let's see the basics of signals
You can create signals using the signal() function from the @angular/core library
import { signal } from '@angular/core';
const count = signal(0);
This creates a signal named count with an initial value of 0.
Signals provide a reactive way to manage data in your Angular components, improving performance and making your code more concise and easier to understand.
How do we read this signal variable?
you can read the above-given count variable which is made with the signal by count(); (parenthesis added at the end of the variable count to read the value created with signal)
console.log(count()); // Get the current value in count
How can we update the signal value?
We can update a signal variable with set or update. Using update allows us to access the current value of the signal , and set allows us to set a new value without caring about the current value.
count.set(5); // Set a new value
count.update((value) => value + 1); // Update based on the current value
Computed Signals
Signals that derive their values from other signals are computed signals.
let's see an example. We have set the count earlier as signal(0).
Here we are using that count in the example below.
const doubledCount = computed(() => count() * 2);
console.log(doubledCount()); // Automatically updates when `count` changes
Whenever the value of count changes, it will automatically recompute with the latest value to doubledCount.
If we are taking another example of multiplication of 2 numbers, we will be able to see what difference computed signals will make.
How we used to do multiplication normally with Javascript earlier is shown below.
let base = 10;
let multiplier = 2;
let result = base * multiplier;
console.log(result); // Outputs: 20
If we later update the value of base or multiplier, we need to manually recalculate the result:
multiplier = 3; // Update multiplier
result = base * multiplier; // Manual recalculation
console.log(result); // Outputs: 30
How can we do the same by using computed signals?
let base = signal(10);
let multiplier = signal(2);
let result = computed(() => base() * multiplier());
If we access the computed signal value, we'll get 20.
console.log(result()); // Outputs: 20
Now consider the previous scenario where we want to change only the multiplier. We can update the multiplier like this.
multiplier.set(3);
After we updated the multiplier in the above line, if we console the result created with the computed signal, we will get the latest value in the result without doing the multiplication step again. No manual recalculation is required.
console.log(result()); // Outputs: 30 (automatically updated)
Effects
Effects automatically respond to signal changes. effect runs immediately when it’s created. It runs again whenever one of its dependencies changes.
Syntax for effects in angular:
import { effect } from '@angular/core';
effect(() => {
console.log('Count changed:', this.count());
});
Use effects in Angular Signals to trigger logging or debugging or to make an API call whenever the signal changes.
Effects are tied to Angular's lifecycle. When a component or service is destroyed, Angular automatically cleans up the effect to prevent memory leaks. Effects eliminate the need for manual subscribe() and unsubscribe(). Effects are destroyed along with the component or service they belong to, preventing memory leaks.
- Signals automatically refresh templates when values change. No need for manual detectChanges() calls.
Top comments (0)