Make state, computed or method private in NGRX Signal Store

[00:00] We can make a piece of state, a computed or a method private within ngrx signal store if we prefix a name of a property with a single underscore character. This is a convention that tells ngrx that this thing can be used only within the code of the signal store and not outside of it, especially [00:20] not on the component level. So let's see an example. Right now, the employee listing component is using the stored items. It's a computed that takes into account all the loaded items loaded from the external API or loaded from the hard codes, never mind, and takes the [00:40] filters into account. So let's move it into using the loaded items so that as for now, all the filters are going to be ignored. And what we're going to do is to make the loaded items private. So let's update the initial state, but let's also update the corresponding type or interface or [01:00] whatever you might have and all the places that we're actually using it. So since here we are destructuring the state into using the loaded items, we have to also update it here. And it seems that there is no place where we would use the loaded items within methods. So here we will see that the property loaded [01:19] items does not exist on this type. Yes. That's true because the property has been renamed, but we will see that if we add the underscore, it still does not exist on the type because it has been removed on TypeScript level. So what is important to realize is that it is not being removed in JavaScript [01:39] since the property does still exist in runtime and it is available inside the store. So the way it's being processed is using the TypeScript utility type, the omit private, where iterating over all possible keys of whatever the store [01:59] includes, all the properties are going to be remapped over here so that if the key name starts with the underscore, it is being filtered out using the conditional type. And if it doesn't start with the underscore, it's basically being passed through, and the corresponding value to whatever [02:19] the key is is just going to be copied from the original type. So as we can see, this is purely TypeScript, so the corresponding property will exist in run time. And we will see that the omit private is being actively used in lots and lots of declarations and places [02:39] within the signal store function. So let's get back to our code. So we don't want to use the loaded items, so let's back to using the items itself. Let's make one more thing private. As said, each property of the state could be made private. Each element of the width computed could be [02:59] made private, or each method could be made private. So in this case, let's make the update filters name method private. Let's save it, and let's walk to the employee filters component, which we've created since this one is using this method. So, certainly, this method doesn't exist. So let's [03:19] update the name to include the underscore. And since TypeScript cannot see the property on the store, since we are outside of the store's definition, let's cheat on TypeScript so that we would put the s any, so that just the compiler will compile the code base anyway, and we will put the debugger statement over here so that we can inspect the [03:39] code within the browser. So let's just refresh the page and let's put something into the filter so that the update name function gets invoked. And what we can see over here is that the this dot store update filters name, and the loaded items, [03:59] they all exist over here. So the private elements within the n g r x signal store are being removed only within the compile time.