Update an Angular Signal's Value and Make Computed Signal Emit Updates

[00:00] You can update the signal value in one of 2 ways via the set method and the update method. You want to allow the user to change the name filter signal value. So let's provide update name filter method on the component class, and let's create the value of type string parameter. Now this [00:19] dot name filter dot set will replace the old value with whatever is the new value and this dot name filter dot update will accept a callback which injects the previous value and here we could create a new value on top of the old one. Now in [00:39] case of just a primitive value, which is a string, we can just use the set method. So we'll just drop this one and we'll replace it with the value parameter. We of course need to create an input to make it editable so let's do a typeText input. [00:59] Let's provide what the value is for this one and it's going to be basically the current value of the name filter and let's listen to the input DOM event and here we would call the update name filter method passing it what the dom event is. However, [01:19] due to the mismatch of types, let's update that the event is going to be of type event And now let's update that. We're going to take the event dot target. Let's assert that it is an HTML input element and that we want [01:39] to access the value attribute on top of that. So right now, if we filter the value like a, we can instantly see that the value of name filter signal has been updated and it caused the filter items computed to reevaluate and finally display Andy and Charlie on the screen. Now [01:59] let's update the value of the item signal. Let's create clear items method which is going to run this dot items, signal and set. It's important to know that whenever you want to update an object value, you should do it an immutable manner that is by passing a new reference to a new created object [02:19] and, of course, an array is an object. Otherwise, if you mutated the value of an object, Angular would not reflect the change for instance. It would not update the template that is using the signal value. So in this case, if you want to clear, let's just provide a new array. If you want to reflect the change, we should also [02:39] create a button that would invoke the method and that would be clear items for the on click and clear items as the button label. Now we might get a type error over here. And we can see cannot read properties of undefined reading name and that's because right now we have an empty array and [02:58] typescript didn't figure out that last item could actually be undefined. So we will put the optional chaining over here. So right now when we run clear items we actually get an empty list because we have updated the item's signal value. Now the signal will notify its direct dependent, [03:18] the filter items computed, which in turn will notify its direct dependent, the visible items computed, and that will cause the template to refresh. Now let's create a way to add a new element to the array. So let's create an append method which accepts a name parameter of type string. And we'll call [03:38] this dot items dot update because in this case, we want to rely on what the previous value of the signal was, and we will return a new array because we don't want to mutate the existing object. So let's spread the previous array value, and let's put a new object. Now TypeScript is throwing a [03:58] compilation error saying that the new empty object is obviously missing the expected ID and name properties. And that's because the items signal has the type which is a writable signal, meaning that we can run either the set or update method. Each signal is a writable signal [04:17] unless it's a computed or unless it's a read only signal. But the value is expected to be an array and the value of the array is expected to be an object which will have the ID and name property so everything is type safe here. So we have to provide what the new ID is, so let's just add it incrementally. So [04:37] that was ID 123, so the new length is going to be basically the length plus 1 and the previous is the array that we've had already. So that would be previous dot length plus 1 and the name is going to be basically the name [04:57] property that comes from the parameter. Now let's add a way to edit the new item name. So let's create new item name, which is going to be at again a signal with an empty string initial value. And let's create an update a new item name method, [05:17] which will accept an event of type event and the same implementation as we've had before. And that will be this dot new item name set and here we'll cast the event target as if it was an html input [05:36] element. And using this one we would access the value property. Now using the new item name and the update name item we would create yet another input over here. So this will be the first input and let's provide that this is going to be the new item name, [05:56] the current value and update new item name. And we would also need a button that is going to be append. And here we would use what is the current new item name. And that's new item name. New item. [06:16] That's it. So the first input is Dan, and we run the new item, which we can see here in the list, or Elia. And we've got 5 items displayed. We need to emphasize one very important thing. Signal value updates have to be applied in an immutable manner. In other [06:36] words, if the value is an object, we should create a modified copy of the object, because if we do mutate the signal's object value, Angular might not emit updates to the signal's dependence. Let's see example of such mistake. Let's mutate the value of the item signal. So we're going to [06:56] create a removed version of whatever is the current value. So this dot items. And using the splice method, we are going to cut away all the elements of the array, and all the elements that are permanently cut away are moved into the removed variable. Now [07:16] let's also create the mutated variable, which is going to display what is the value of the this dot item signal right after the mutation. Finally, we would also console log what are the values. So console log and thanks to this object curly syntax, we're going [07:35] to clearly see what are the two values. So let's now update the application. Let's clear the items. We can clearly see that removed exists all the elements that have actually been removed and that the mutated one is empty. And the thing is, when we click log items, which actually [07:55] just displays the current value, we can see that the current value is an empty array. But what we can see in the template is the 3 items, so we can clearly see our signal and the template are not consistent.