Make an Angular Signal Compare Object Values Instead of References
Angular's reactive signals provide a way to manage state and automatically update the view when the signal value changes. However, you can customize how Angular determines if a signal's value has changed by configuring the signal's equal property.
For example, you can use the lodash.isEqual function to perform a deep equality check, ignoring changes in object or array references if the contents remain the same.
[00:00] Configure creation of the signal by passing the second parameter, which is an object, which includes an equal property, which is going to be a function which accepts the previous and the current value and it's supposed to return a bullion, determining whether previous value of the signal and the current value [00:20] of the signal are the same. Obviously, previous is going to be of the type t, where t is the type of the signal's value, and current is also of type t. Both are of the type of an array of items. The default implementation is object is, which would check [00:39] whether the two values previous and the current are the same. The object dot is built in JavaScript function is almost the same as previous triple equal current. The only difference is in how it treats the positive and negative zero values and the none, not number, value. But [00:59] it is the same in a way that it compares references in case of having object values. So if a signal replaces its direct value with another object or another array, which has exactly the same value, but just the reference is different, then a signal would notify all [01:19] its dependents with the fact that its value has changed. So if we want to have a signal which would notify only a value change, but ignoring the fact that just its top reference has changed, we need to provide an alternative implementation. And for this reason, let's install and import Lodash. [01:39] We would also need the types for Lodash, and let's import lodash within our file. So that would be the lodash library. And here, we would provide lodash dot is equal. Now let's [01:59] see this in action. Let's copy the initial value of the item signal and let's replace it within the clear items method. And when we will call the clear items, we're basically going to reset the signal's value into the initial value. Now remember that the item signal is [02:18] being used within the console effect within the components. So whenever we change the value of the item signal, the effect should run and that would be reflected by the console log. So when equal is set to compare only the values of the signal but not the reference and [02:38] we clear the items which basically replaces the underlying items value we can see that the console log hasn't been executed. However, if we comment out the equality function and that would go back to the object dot is which compares the reference and we would clear the [02:58] items, we can see that the console log, the effect of our signal has been executed as many times as we have run the clear items function, which changes the reference.