Share Angular Signal State Using Services

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 6 months ago
Updated a week ago

Moving a signal and related methods to an Angular service allows sharing between components.

The service we create will expose a read-only property for the signal and methods to update it.

[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.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today