Note: This article relies on a pre-release version of Angular 16.0.0-next.0. Things may change before the final release.
Signals are everywhere in the Angular community right now. Why is everyone so excited? Are they really better than RxJS? Can I use them now? I’m sure many questions are racing through your head. Let’s discuss the three I mentioned above and look at some code.
Why Is Everyone So Excited?
Signals are a fine-grained reactivity primitive. What? Signals are a way to gain finer control over how changes happen in Angular. They are an Angular primitive, meaning they don’t need decorators or classes. For example, you can create and destructure a signal at the top of a component:
https://medium.com/media/a6a9d08259e296fb17b7be5ee9acd537/href
From this example, we can see that a signal is pretty cool. To get the value from a signal, we can call it like a function without any arguments. count() will give us the current value of the count signal. However, due to the way Javascript works, we can add properties to functions that we can destructure. On line 4, we destructure the update and set methods from the count signal and rename them updateCount and setCount respectively.
Are They Really Better Than RxJS?
This question is a little misleading. Signals are useful for synchronous reactivity. RxJS is still the best library for asynchronous reactivity. Signals will not replace RxJS. However, they will make it easier to make our code reactive synchronously. The classic “counter” example shows this well. It doesn’t make sense to reach for RxJS when an Angular primitive works:
https://medium.com/media/50d0bcfb32960ecb1c6986d0298e2144/href
Can I Use Signals Now?
You can. It is very simple. Signals are still in early preview and probably will change. That being said, let’s look at some cool things we can do with signals. First, to install signals, you can use the Angular CLI:
npx @angular/cli@next new <project-name> –minimal –defaults
Once that command runs, you have signals in an Angular project. Remember, signals are primitives in Angular. This means that code like the destructuring example will create a global signal when processed, even if it is in a file with a component. If you have this component on a page multiple times, they will all use the same signal.
Another issue to be aware of with the current implementation of signals is that you cannot use OnPush change detection. Sometimes, you may even need to inject the ChangeDetectorRef and call detectChanges(). This is due to signals still being pre-release. Fine-grained change detection still needs to be worked on, so the ChangeDetectorRef is still necessary for change detection. Remember, we are still in a very early preview of signals. All of these issues will be addressed in the future.
Bonus Question: Can Signals Be Injected In A Reusable Manner?
Sure, you can create an injectable class or use an InjectionToken. Here is an example of using an injection token and a provider factory to provide signals to the DI.
https://medium.com/media/1b24ca4ecedf24637a22d973dc6689fa/href
Using this example, you could provide a signal at the application level, route level, component level or any other place you can use providers. The possibilities are endless. Here is an example using the code from above to provide a signal at the component level:
https://medium.com/media/2f4e739f2930b2bc963b630ab470dacb/href
Signals are fun and relatively easy to use. After some experimentation, signals are a missing piece of Angular. You should experiment yourself and participate in the conversation with the angular team.
If you want to explore signals, you can clone this GitHub repo. It includes all the examples from this article and more.
In closing, here is an article by Federico Monaldi that goes into a deeper explanation of signals. I recommend reading for a deeper understanding of how signals work.
Are you going to ng-conf this year?
Join us at ng-conf 2023!
ng-conf | June 14–15, 2023
Workshops | June 12–13, 2023
Location | Salt Lake City, UT
ng-conf 2023 is a two-day single track conference focused on building the Angular community. Come be a part of this amazing event, meet the Angular Team and the biggest names in the community. Learn the latest in Angular, build your network, and grow your skills.
Let’s Use Pre-Release Signals was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.