💥 Angular Signals Pattern: Signal-based Data Services

This video is part of the Angular Core Deep Dive Course - angular-university.io/course/...
Check our our latest in-depth Angular Signals guide - blog.angular-university.io/an...
Free content at the Angular University:
- 20% of our lessons are free, no login required to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/...
Twitter - / angularuniv
Facebook - / angular.university
RUclips - / @angularuniversity
Instagram - / angular.university
LinkedIn - / angular-university
TikTok - / angularuniversity
Threads - www.threads.net/@angular.univ...

[@AngularUniversity]

This video is part of the Angular Core Deep Dive Course - angular-university.io/course/angular-course

[@theprantadutta]

I really like your videos, but please use Dark Mode 😅

[@AngularUniversity]

The new videos all use dar mode, except the updates to old courses that were recorded using light mode 😊

[@seekthetruth5458]

You were the first on RUclips to explain this new feature 🎉, thank you!
Played around with signals for a bit, there are 2 issues with them:
1. Storing a signal in a variable and then accessing it in the template will cause a signal to lose its reactivity. In my case I used a signal from one service in a second service. When it was updated in the first service, the second one didnt know about it.
2. Signals dont work with objects, again no reactivity if one of the properties change. So far it's good for primitives only.

[@AngularUniversity]

Thank you 😊 I think something was going wrong because you can store a signal in a service and it will report it's changes to other parts of the application. notice that signals are not yet integrated with change detection, so if you were using OnPush that might not have worked. For objects, you need to emit a new object if you change any of the properties. I think later on there will be a framework primitive similar to Qwik useStore that will allow us to create a signal from each property automatically. Until then, we can use Ngrx Signal store.👍

[@eduardointech]

Thank you!

[@BrutalCSkAKAN]

Id like to see how you solve an array containing multiple signals.
Where you could append or pop signals in the array, together with a trackBy in the template.
This would mean that we first off have a template that only emits changes to the changed signal due to trackBy, but also only reacts on the signal change of that specific iteration in the array.
Meaning that we only emit one event in a list of array, without computing the rest of the unchanged entries in the array?

[@digital-signage]

please produce a video on how to embed signals inside an HTML template which now fixes the problem of not needing to embed methods which were an anti-pattern.

[@AngularUniversity]

I've released several videos on Signals here on the channel, let me know if any of the videos helps with the question. Calling methods from the template I wouldn't call it an anti-pattern, as long as the methods create quickly return their value and don't do an any expensive operation like sorting. If it's a simple derived property I don't see how that could cause an issue. For example, using signals implies calling a method from the template to get the value of the signal.

[@dylanjhalltech8313]

Thanks!

[@AngularUniversity]

Thank you Dylan, you're welcome 😊

[@michaelrtan09]

I'm planning to move away from ngrx (global) state management to signals. One reason is because of the boilerplate needed to setup ngrx(actions, effects and reducers). What are your thoughts on this? Do you think this is ok?

[@AngularUniversity]

notice that those are 2 potentially different concerns, you can also do global state management using Signals with NgRx Signal store for example. If you mean not using a centralized store and using local state management and a few shared data services that are all signal-based, I think that is a great approach for a large number of applications, to could work very well depending on your application. Notice also that signals are not yet plugged into the change detection system. 👍

[@michaelrtan09]

@@AngularUniversity I've created components using onPush change detection strategy and used signals in it. I dont seem to encounter any issues with the new components/pages that I've created. I'd like to ask where/when the issue will occur when using signals with my setup. thanks

[@Nabulio85]

It’s looks like the pattern with service with private behaviorsubject and a public derived observable 👍🏻

[@AngularUniversity]

Correct, it's the same pattern but applied to signals 😉

[@michaeltan2003]

Hello, I just want to ask if signals are production ready on angular 17? thanks

[@AngularUniversity]

The Signals API is out of developer preview, except the effect API. Signal inputs are on developer preview on 17.1. Even though the Signals API is ready, signals are mostly not plugged in yet to the change detection system. You can already use the Signals API in production, for example as an alternative to RxJs subject-based stores. But bear in mind that the Angular reactivity story is still evolving.

[@michaeltan2003]

@@AngularUniversity Thank you for the quick response. I guess I'll just play around with it for now and familiarize it. Thanks again and more power!

[@AngularUniversity]

@@michaeltan2003 You're welcome, enjoy now is the best time to learn signals. 😄

[@user-gt1rs5iv3q]

Tuga como daqui até à china!

[@AngularUniversity]

😉

[@user-ed8eb6cx7o]

I don't understand why I need use signals instead of Subjects?

[@AngularUniversity]

Just because they are much simpler, no need for RxJs. You should see RxJs as optional from now on, if you have a simpler alternative, go for it.