Create an Angular Computed Signal Which Depends on Another Signal
Computed signals in Angular allow for the creation of derived values based on existing signals. By defining a new property and assigning it a computed signal, you can perform calculations or transformations on top of an existing signal's value.
To create a computed signal that remains responsive to changes in its dependencies, it's essential to:
- Define the computed signal's callback function, which calculates the derived value based on other signals
- Ensure that the computed signal is consumed by a live consumer, such as a template, to trigger re-evaluation when dependencies change
The reactivity flow in Angular ensures that whenever a dependency of a computed signal changes, the computed value is automatically re-evaluated. This re-evaluation only occurs if there is a live consumer, such as a template, that depends on the computed signal.
[00:01] Create a new property which gets assigned a new computed signal. We need to import computed from Angular core. The computed function accepts another callback function which will calculate something on top of an existing signal. In our case, the existing signal is this dot items. We're [00:21] going to get the last item by calling slice minus 1. This is an array. So we will call just the index 0 to get the very last item. This one is something that we don't need anymore and we'll call last item within the template. Now this returns the object, so we'll [00:40] just call dot name and we will prepend it with the last label. As we can see, last Charlie gets displayed. The reactivity flow works like the following. The template depends directly on the computed last item. Whenever the computed value changes, the template [01:01] will get updated. But the last item depends itself on the item signal. And whenever item's signal change computed last item will get a notification. So we have a graph of dependencies. Items affect the last item and last item affects the template. [01:21] Computeds are lazy. If we didn't use the computed anywhere, it would never get reevaluated whenever any of its dependencies change. So let's pretend this situation and remove the line that consumes the computed value. Now there is nobody interested in getting the most recent computed value. So whenever any of the dependencies [01:41] change, it will never get reevaluated. But as we bring back the template part which consumes the computed last item, the computed has to reevaluate as there is something which needs it. The template is a so called live consumer. A simple implementation would be a case sensitive one where [02:01] we first return the this dot items, the value of the array and we filter it by a simple condition where we check that item dot name includes the current value of the name filter. So we could return immediately an expression, [02:20] but we can do some more calculations like this. Let's make a case insensitive one where we have to first check what is there either to uppercase or to lowercase value of the name filter and that would be this dot name filter to lowercase in this case, so we can precalculate [02:40] whatever we want. The only thing that we need is to return the final expression. So we're going to again filter the items array by a very similar expression and that would be item dot name and now this needs to be turned into [03:00] lowercase in a similar manner and here we includes something that we have precalculated earlier. The reactivity workflow is that whenever items signal change it will cause the filtered items to reevaluate or whenever the name filter changes it would also cause [03:20] the filter items to reevaluate but as we remember we have to make this computed actually consumed by something and currently it's not consumed by anything. So let's just replace items with filtered items and we can see that everything gets displayed here So let's just change the signal value into [03:40] nd to make sure that it actually gets filtered because there is a template, which is a live consumer, which makes the computed alive and reevaluate on any change of any of its dependencies.