Create an Angular Computed Signal on Top of Another Computed

[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.