Create an NGRX Signal Store with initial value using withState

[00:00] Start by installing the dependencies. So we're going to run n g add and here at ngrx/signals since this is the name of the package. And optionally, we can specify the version we're interested in. In our case, the most recent one, latest. So we're going to wait until the corresponding [00:19] modules get installed and the package. Json file gets updated. So after the install is complete, we should see that in dependencies, there is one new entry, which is add ngrx slash signals, in this case, in version 18. So all dependencies are installed already within one [00:39] single package. So let's proceed to creating the store itself. I have opened the employee store TS file in employees directory or model, whatever. Since we are going to create an employees listing, which is going to load the data, display the object details, do some calculations, do some filtering, [00:59] and so on and so forth. So we're going to use a function that is called signal store imported from NGRX signals. So the API that we're going to use here is going to use a composition where we're going to provide feature a, provide feature b. And, basically, [01:19] whatever we provide at the very beginning is going to be wrapped, composed with whatever are the other steps. So the first and most important features which we're going to use is actually with state. So what is basically the data, the state of our store that we're going to use? Here, we could [01:39] simply put an JavaScript object over here, but it's most probably a better idea to provide a type or a TypeScript interface that is going to define what our employee state is. So let's create type employee state, which is going to simply store some of the data and [01:59] the filters themselves. So let's create the property items, which is going to store the employee objects array. And let's create some filters that we're going to use, like, later. And there would be a name filter, which is simply a string. So we're going to be filtering by first [02:19] names and last names. And we're going to, filter the employee objects by their salary, which we cannot see over here yet, though every employee has their salary. And there might be a from salary, which is the lowest possible value of a [02:38] salary, and the to salary, so the highest possible value. So we're going to create a typescript record over here. So for both the from and the to properties, and their value is going to be simply a number. Now we're going to create a object literal, which is going to, [02:58] have the type of employee state. So let's call it initial state, and let's annotate this with the employee state type. And here, TypeScript will guide us through creating all the required properties. So initially, we don't have any items yet. They haven't been loaded. We're [03:18] not providing any initial data right here. So the property that we're missing is obviously filters. So let's create, filters, which is going to include the name itself, and let's initially define the name, filter, which is going to be an empty string, and the salary, which is going to be [03:38] a from. Let's say that, just for the sake of simplicity, the lowest possible salary value could be 0, and the highest possible value could be 10,000 in this dataset. So having defined what is the type and what is the literal which [03:58] is bound, which is annotated to the type, what we're going to do simply is to put that this initial state is going to be used within the with state feature. And what we're going to do here is simply export const employees store and this equals to [04:17] the store that we have created. If we hover over typescript types, we will see that NGRX is capable of figuring out what the under lying types are such as signals or deep signals, which we're going to, take a look at slightly later. So this is how we create an NGRX [04:38] signal store.