Retrieve and display the NGRX Signal Store state inside an Angular Component

[00:00] In order to retrieve and display the data from n g r x signal store within a component, let's head over to components template. In the simplest possible scenario, what we can do is to access the injected store directly and read one of the existing properties of the store. In our case, we have already [00:19] defined only the with state features. So we have 2 properties, the items and the filter. Let's take items. If we take a look, we'll see that each of these properties is a native Angular signal. This is what n g r x signal store creates under the hood. Now just as with any other Angular signals, if we want to grab their most [00:39] recent value, we just need to call them as if they were functions. Now I'm not going to put it here, not yet, at least. And let's open the network dev tools tab just to show that whenever this component is initially displayed, there is an HTP request that is being made. This is being [00:59] executed by RxJS observable stream. Here we've got the this employee's dollar, which is an HTP call to the external API. Never mind that We're going to remove this code anyway. And this stream is being subscribed here using the async pipe. So we're [01:19] going to replace it entirely step by step with NGRX signal store. So if we uncomment this line and we'll basically cut away this piece over here and we'll simply put the function that reads the signal value, then we will see, first, that there is [01:39] no request being made. And second, since our store property, the items property is empty, there is simply no data for the component to display. So for this reason, we're going to import a mock employees, which is an array that just includes some hard [01:59] coded object. This is just for the sake of the while, so we're going to remove it slightly later. So initially, our store is going to include some 50 elements just to have anything to display over here. So let's walk back to our component. We can see that, yes, these objects are being [02:19] displayed. We can also see that there is a loader popping up over here. This is caused by the fact that we have some of the properties defined here. There always come the question, how much data do we want to be located within the store? How much data do we want to be put inside a component locally? So in [02:39] our case, we're going to move all these information, all this data into the store. So let's comment out the engine edit. Let's comment out all these HTTP related things, and there are also 2 properties that we're going to migrate into the store. So currently, we [02:59] had only the items itself, but we didn't have the definition for the properties for the is loading and for a potential error. So we're going to have an is loading additional property within the employee store, state object. So is loading is going to be either true or false, [03:18] and there is also going to be additional property, the error. Either there is an error or there is no. And subsequently, we need to include these 2 new properties within the is loading. So initially, yes, we are loading. And that initially, there is [03:38] no error, for instance. Since right now we have all the mocks available, then we can just slightly change it to make it is loading false. Now, let's go back to our component. When we save the file, we will see that the is loading property is [03:58] being highlighted because it it doesn't exist anymore, of course. So what we need to do is to do the very same thing. So we're going to access the store, and now we have 4 properties. The is loading and the error is available. So what we want to do is to call the is loading since [04:18] this is a Angular signal, and we will see that, yes, at this point, this loading is being used for displaying the loader or not. And finally, if we go back here and toggle that is loading to true or false, then we can see that the corresponding value is [04:38] being displayed accordingly.