Update NGRX Signal Store state using withMethods calls

[00:00] Go to the definition of the signal store and at the very end, add one more feature. This time it's called with methods. Again, import it from ngrx/signals. Now with methods is similar to with computed in a way that it accepts whatever is the content of the store that we have [00:19] created in all the steps so far. So we have all the properties provided, thanks to with state, and we have the computed provided, thanks to the with computed. And similar to with computed, with methods is about to return an object that will include all potential methods [00:39] that actually update something. In our case, we're going to update the filters. So we're going to update the name filter and the salary filter or filters. So what we'll do right now is to provide the name update filters name, which is going to [00:58] be simply the string value. So here we can use a types of lookup just to look up what is the type, so employee state. Now let's walk into filters and grab the type of the name so that there is, one single source of the definition of the type. And what we want to do right now is [01:18] not to directly modify the value of the store. No. We don't want to do this. We want to use the patch state, a separate function also imported from ngrx slash signals. Patch state accepts the definition of the store in the first parameter. And in the second parameter, [01:38] it accepts a updater callback which creates a new state value on top of the previous state value. And we're going to patch only a slice of this object. So as you can see within the store parameter, this is a signal based structure. So we have the signal [01:58] properties and we have deep signals. However, after going through the path state function and passing what the stories, the store again includes the signals. The state is basically a bare JavaScript plain object. So no signals, no deep signals, just the values. And what is important in this case, we are patching [02:17] only a slice just as the name suggests. So if you want to modify, let's say, only the error, this would be the only property that we would define over here. If you want to modify the name property within the filters property, then we don't care about these properties. Loaded items is [02:37] loading an error are not interesting for us. We will only apply what is the new value of the filters so that all the remaining ones will basically remain with whatever value they had. So we're going to define that the new value of filters is whatever we had with [02:57] the filters so far, filters. And we're going to spread it. And after we have spread whatever the value is, now we just provide so that, okay, the new value is whatever we have passed, thanks to our parameter. So this is the new value, or we could [03:17] also make it even shorter doing this way. So our update filters name, method is already available within our employee store. So let's proceed to the employees listing component, and we'll make use of this [03:36] method. So let's quickly create an input value. So there would be an input type text, which is going to include also the placeholder that this is basically a name search or name filter. And what we want to put over here is [03:57] that the current value that we're going to use is actually going to be taken directly from the store if we want. Of course, we can provide an encapsulated function. So this is going to be store dot filters dot name. So whenever the value of the stored filters dot name [04:16] changes, then this will be reflected by the input. And whenever there is a change, so it depends whether we want to use the change event or, in this case, input so that we don't have to lose the focus so that the input element does trigger an event. So whenever there is a keystroke, the event would be passed in case of the [04:36] input event. And here, we would provide a method on the component. Let's say we would call it update name, and let's pass the event, which is the native event. So we just need to provide what is the definition of this update name method. So update name method [04:56] accepts an event, which is a native Dom event. And what we're doing right now is that we want to access the store, and this is the method that we have just created. So it accepts a name of type string, and we have an event. So one thing that we could do is basically that [05:16] the new value is simply the event dot target. And we want to access the value parameter, but due to types of related things, we would need to, make it available so that we can, for instance, use the type assertion so that this is an [05:36] input HTML input element. And finally, what we do right here is new value. So let's see how this works. We've got the name search. And as we type something, we can see that filtering works correctly.