Angular computedSignal with the previousValue
May 20, 2025
Well let's start with the sad news if you are using Angular 18 and before this is not available out of the box.
Angular 19 introduces something called linkedSignal
that allows us to do this.computedSignal
really should not do this. By design it is a pure function that means it should not take the previous state into
account. In this GitHub Thread you can see the discussion about this.
What would be a use case? In my case I have a signal that holds an array of items. And while I can use computedSignal
or
effect
to keep track of the array in some cases I wanted to know what changed. Was an item added or removed? And maybe more important
which item.
I found and used different approaches to solve this. I will show you some of them.
Angular 19 - the right way
import { linkedSignal } from '@angular/core';
const linkedValue = linkedSignal({
source: sourceSignal,
computation: (sourceSignal, previousValue) => {
if (previousValue.length > 2) {
return previousValue;
} else {
return sourceSignal;
}
},
});
Linked in the official docs you can find all the
details. It's very powerful and straight forward. The computation
function gets two parameters. The first is the current value of the signal
and the second is the previous value.
Use rxjs
Pre Angular 19 this was my personal preference.
toObservable(mySourceSignal).pipe(
pairwise(),
takeUntilDestroyed(this.destroyRef),
).subscribe({
next: ([oldValue, newValue]) => {
// do something with the old and new value
},
});
With toObservable
we are converting the source signal to an observable.
Then we use pairwise
to get the previous value. The takeUntilDestroyed
is a helper function that will unsubscribe from the observable
when the component is destroyed. This is important to avoid memory leaks.
Use an outside variable to keep track of the previous value
This is theoretically possible. But you should almost always avoid mixing signals and plain values/variable. I don't like it at all and won't even bother you with an example.
ngextension - extendedComputed
ngextension/extendedComputed provides a funcion that has access to the
previous value as a parameter. I never used it myself but I've seen other people using it.
It maybe become deprecated in the future, now that Angular provides this out of the box itself.
← Back to Blog List