Create an Angular Computed Signal on Top of Another Computed
Computed signals in Angular allow for the creation of derived values based on other signals, including other computed signals. This enables the composition of complex calculations and transformations by building upon existing signals.
When creating computed signals that depend on other computed signals, it's crucial to:
- Ensure that there are no cyclic dependencies, where two or more computed signals directly or indirectly depend on each other
- Consume the computed signal by a live consumer, such as a template, to trigger re-evaluation when dependencies change
Angular's reactivity system automatically detects and prevents cyclic dependencies in computed signals, throwing an error if such a scenario is encountered.
[00:00] Create a new property and assign a computed which simply reads any existing computed signals. In our case, visible items will contain the items that are already filtered and sorted. For this reason, we will create a new signal which is called ascending order and initially [00:20] it will include the true value determining whether the order is ascending or not. Now let's proceed to the implementation. So there is a const order which determines whether the ascending order is true or not. So in case it is, it's going to be a positive value. In [00:39] case it's not, it's a negative value. So let's return what is going to be the visible items returned expression and that's fillered items. So the new computed depends on an existing computed and right now we're just going to sort it by the order [00:59] whether the name property is, ascending or not. So we're returning a dot name locale compare with b dot name and multiply it by the order. So in our case, we've got n d. So let's just remove [01:19] the n d value to an empty string. And now let's switch the ascending order to descending order, but also we need to make sure that the computed is actually used. So let's replace within the template filter items with visible items. And here we can see that with descending order, Charlie is the [01:39] first one. And if we switch again to ascending order, Andy is the first one. A computed can be created on top of other computed signals as long as there are no cyclic dependencies. But even if you do that, Angular will catch it for you. So let's create a new signal called a with some string initial value [01:59] and let's create 2 computers b and c where they will reference each other. So b will depend on this dot a plus this dot c which we haven't created yet And let's create the c one. It's a computed which also depends on whatever [02:19] a is and b. Now even typescript can see that the declarations are recursive. So let's avoid that by explicitly defining what is the type of the signal and let's import the type signal from Angular core most probably that would be a value available on [02:39] a service r, another thing that we import outside of the components. So let's make it signal of type string and again c is a signal of type string. They reference each other. Now Angular is going to find out that there is a error in the design. So let's [02:59] see this error. Right now, there is no error because we are not using either b or c. So let's basically display the value of 1 of them. Let's make it b. And right now, Angular will throw the error that it's detected a cycle in computations.