Angular: Using Signals with an Intermediate service for data sharing between components
240710-14
Intro
In one of my posts [see below], I have shown how we can use observables/subjects with a shared service (‘ShareDataService’) for data sharing with immediately updatable values between 2 components (‘Test1Component’ and ‘Test2Component’).
As I said, the above blog post uses Angular 16. x-based simple demo project (the GitHub here), and it is based on subjects (observables).
After the introduction of Signals in Angular, data sharing, between 2 (or more) components using a common (shared) service, can also be achieved using signals.
So, in this present blog post, we will use the same logic and code structure, with 2 components and with the same shared service, but this time we will use Angular signals. The implementation project will be based on Angular 17.3.8 and thus our components will be standalone components, this time.
Thus, the reader can easily compare both of the implementations, the previous one with Subjects and this one here, with Signals.
Starting the demo project
You can create a new project from scratch on your own, or perhaps a better approach is to clone the initial project repo here.
The initial commit of the repo has the initially created standalone testing components ‘Test1Component’ and ‘Test2Component’, as well as the shared service ‘ShareDataService’, all at their very initial stage.
Now it’s time to add code to them.
The Code
The SharedDataService
As you can see, we have kept the IMsg interface, as well as the setData and getDate functions. However, instead of using a Subject (e.g. a BehaviorSubject, or a ReplaySubject, etc.), we use just a simple writable Signal and we give it an empty IMsg object as an initial value:
public $Msg = signal< IMsg>(this.myMsg);The setData function sets the signal value passed as a parameter, and the getData returns the signal value to the caller. (We will make simpler our code later on)
The Test1Component
The Class – test1.component.ts
We use the Signal’s effect code block within the component constructor, and thus we make the Test1Component a signal “consumer”. In every change of the signal value, the Test1Component is kept notified and updated.
The user can type a message and either click on the ‘Send’ button (onClick method) or hit the ‘ENTER’ key (onKeyEnter function). The message actually, updates the value of the signal via the sendMessage method, by calling the shared service setData function
There is nothing special to say about the template and the stylesheet. You can just take a look at the demo code I use below, but you can always use your own.
The Template – test1.component.html
The Stylesheet – test1.component.scss
The Test2Component
The Test2Component code is pretty similar to the Test1Component code above, and thus it doesn’t make sense to show it again, here. Moreover, you can find the full code, in the updated repo commit.
The AppComponent
The Class – app.component.ts
You can see, that since we use standalone components, we have added the childe-components ‘Test1Component’ and ‘Test2Component’, into the imports section of the AppComponent.
Again, there is nothing special to say about the template and the stylesheet of the AppComponent and thus there is no reason to show them here. However, you can find the code in the updated repo.
Find the updated repo-commit here.
Updates, making our code simpler
Looking a bit more carefully, at the functions ‘setData()’ and ‘getData()’ in the ShareDataService, you can easily understand that what they do, is just to update and get the current value of the $Msg signal. But, since the $Msg is a public property, we can directly use it in the consumers 0 the Test1Component and Test2Component in our case. This allows us to eliminate both of the functions in the ShareDataService.
So, our service becomes very simple! now:
The only changes we must make in the Test1Component (and Test2Component) is to access directly the public signal $Msg, instead of calling the functions:
You can find the updated repo -the last commit- here.
Conclusions
Angular Signals become a new standard in Angular and as you can see, their adoption makes our code a bit more simple: clean and readable.
That’s it for now! I hope you enjoyed it!
Thanks for reading and stay tuned!
About Post Author