Share Angular Signal State Using Services

[00:00] Create a new service. We'll call it item service, and we'll move the item signal there. 1st, let's inject the service so that the component will be able to access the values of the service. For this reason, we're going to use the inject function from Angular core, the new way to inject dependencies, [00:20] and we'll inject the items service. Now let's move the items signal to the service along with the clear items method and the append method, which both update the signal value. And let's import the missing dependencies, which is [00:39] signals imported from Angular core so that the item service can create a new signal on its own. Now let's make the items property a private property and let's accordingly update the implementation of clear items and the append method. And what we want to expose is the public [00:59] property items, which is going to be this dot hash items dot s read only. This way, the only way to update the value of the private item signal is to do it via the public methods. So app component injects the service, and we're going to [01:18] use the items signal from within the service and we will have to update a couple of places within our component so that all occurrences of the items signal would get updated. And here with read only items, we can drop this one because it's irrelevant anymore. And let's [01:38] also update the template. Within the template, we're using the two methods and we'll also use it directly via the service. So if the component wants to read the values, it will use the read only value and, again, the set and update methods don't exist. And if we want to [01:58] modify anything, we can do it only via the public Methods.