Unlocking the Power of Angular Signals + RxJS: Practical Applications
HTML-код
- Опубликовано: 16 июн 2024
- Now that signals are available in Angular version 16, let's walk through how to use them in a more "real world" application.
We'll create signals and computed signals. We'll issue HTTP requests and emit the response using an RxJS Observable. Then create a signal from that Observable.
We react to signal changes and create an Observable from a signal. That way we can pipe the signal value through an Observable pipeline and retrieve data based on changes to that signal.
Because signals created from Observables are read-only, we also look at how to create writeable signals so we can modify our retrieved data.
This video is a live-coding demo. If you are new to Angular signals, check out my introductory signals video that covers the what, why, and how. You can find the link below.
Links
Angular Signals: What, Why, and How?: • Angular Signals: What?...
How Angular Signals and RxJS Work Together: • How Angular Signals an...
Signal vs BehaviorSubject: • Angular Signal vs Beha...
switchMap vs concatMap vs mergeMap ... Oh My!: • switchMap vs concatMap...
Sample code: github.com/DeborahK/Angular-S...
Content
00:00 Unlocking the Power of Angular Signals + RxJS
00:32 The application in action
01:12 The code for the application
01:33 Using the inject function
01:58 Creating and setting a signal in the component
03:58 Creating a signal from an Observable (HTTP GET)
06:59 Reacting to a Signal and issuing an HTTP GET request
11:30 Computed signals
13:40 Mutating a signal
13:58 toSignal is readonly!
15:38 Exposing signals in services
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and RUclips content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
View my RUclips content: / @deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #signals #bestpractices #angularsignals #angularsignal #signalsinangular #demo #signaltutorial #angular16 #rxjsandsignals #signalsandrxjs #signalvsbehaviorsubject #CRUD #statemanagement #statemanagementinangular 
Наука
Thank you for all your videos. You produce incredibly high quality content and I think this is one of the best channels on youtube to learn Angular.
That is wonderful to hear! Thank you so much!
Amazing. I`m starting now with signals and this content help me a lot.
Thank you! And best of luck!
Another great content. Thanks Deborah.
Thank you!
Your content is amazing, I am learning a lot from all your videos, please keep it up
Great to hear! Thank you.
Hey I been following you since Pural sight and always been impress with you , I love videos
Thank you!
Very grateful that, apart from explaining all the code beautifully, you share the code so those who are starting in Angular, we can have a base where to consult how to perform these operations so common in any application, both with observables and signals...
A pleasure to learn Angular with your videos. You deserve many more subscribers! 😉
That is very nice to hear! 😊
Regarding the subscribers ... tell your friends. 😆
Kurata I love your videos! Thnxz!
Thank you so much! 🙏
amazing content👏, Keep the great work up
Thank you!
Always new contents ❤❤
Yo're amazing! Thank you for you content, it is very useful.
Happy to hear that! Thank you!
Hi Deborah, great application of signals!
I have a question: Do you think that using toSignal() inside of a service might become a potential memory leak source,
as the RxJS observable subscription created by it, would get automatically unsubscribed
only when the service where the signal is declared is destroyed ?
Nice, waiting for new videos about signals
Thanks!
Anything in particular you'd like to see about signals?
Really good vídeo, i always learn something new. My suggestion is to show how can we handle an http request error from the component and in the same time usa a signal from the service.
Thank you for the kind words.
I've been experimenting with some error handling strategies. If you want to see them know, you can find them here: stackblitz.com/@DeborahK/collections/angular-signal-error-handling-research
Hi, Thank you for the video, it was amazing, one question, is it recommended to use signals as much as possible in the component template ?
Thank you for watching! Yes, it is recommended to use signals in the component/template. The Angular team is working toward using signals as a way to get away from zone.js and it's change detection techniques. In many cases, this can improve UI performance. So moving toward using signals in the components gets you closer to where Angular is currently headed.
do you know if we need to wait until ng17 b4 signals comes out of dev preview? loved the vid, practical examples really bring it home for me
Thank you!
The team is saying you can use them now ... but suggest only on smaller projects as the API could change.
I haven't heard any official word on when they will be taking them out of developer preview. I know they are working on numerous additional features, such as signals in @input.
Thanks again for this video. But What about unit testing with Signals. Is everything is working ? Is Jasmin framework is ready for Signals unit testing ?
Signals are only in developer preview at the moment. I would assume the team will work on a unit testing strategy as more signal features are rolled out.
Woah, this is very intriguing... Would you recommend signals over observables like your rxjs course on pluralsight?
Yes, signals are very interesting!
And no, signals don't replace Observables for async operations (such as issuing an HTTP request). And for collecting and merging data from multiple endpoints (as shown in the course).
Signals may replace Observables in some cases where you are defining a Subject/BehaviorSubject for the purpose of responding to user actions. In many cases, those scenarios are easier with signals.
Great explanation 👍 one question how this signals will work along with reactive forms ??
Thank you!
From what I've heard from the Angular team, this is something they are still working on. As far as I know, there hasn't been anything released to help with signals and forms (or ngModel) ... yet.
Thank you for this video ! Is it possible to consider completely separating from RxJS at 15:51 by making computed from selectedUserId that calls the HTTP resource to remove the switchMap, and that userTasks be a computed of all that to remove the tap?
Thank you!
Signals are not set up to be used for async operations ... so they shouldn't issue an HTTP request. Is that what you're asking?
Could you make a full CRUD operations video with rxjs + signals + REST endpoint, like a real life example ?
Great suggestion! Thanks!
Hi Deborah,
Thanks for the good contents.
I just want to ask you a question, is this feature now stable for use in production apps?
Thank you for watching.
Signals are currently in "developer preview" ... though I know there are developers using them now in production applications. So "at your own risk" at this point?
Hi Deborah, as always your contents are very informative and easy to learn. Btw, how can you implement a loading indicator with signal every time you switch the selected user? Let's say pulling tasks of selected user takes few seconds to load.
Thank you!
Does something like this work for your loading indicator question? stackblitz.com/edit/angular-4ndmtl
Oh ... this is all RxJS based. Let me change it to signals.
How about this one: stackblitz.com/edit/angular-nwurc9
Hi Deborah. Great video as always! Quick question- you said to leave the "toSignal" because it subscribes. Does it unsubscribe (If we use it in a component for example)?
Thanks!
Yes, toSignal() automatically subscribes when the toSignal() code is executed and unsubscribes when the class goes out of scope.
For more information, see the "Manage the subscription" topic under this link: github.com/angular/angular/discussions/49681
@@deborah_kurata Thank you!
Thanks for a great video as always Deborah!
I have an honest question about this interop between RxJS and Signals. Is this how it is supposed to work? Manually converting Observables, tapping into streams and setting Signal as a side effect? I would appreciate some more official information about how to handle the delegation from the async API calls to the client services which can then exclusively use Signals.
Angular v16 is a "developer preview" of signals. It provides us an opportunity to try them out and provide feedback.
Right now, to create a writeable signal from an RxJS observable, the approach I presented in this video works. I've been talking to several Angular team members about a *better* solution for creating writeable signals from an http response, and they have some ideas about additional features to make this very common task easier.
For "official information" ... you can read the Angular team signal discussions here: github.com/angular/angular/discussions/49685
Thank you soo much!
Thank you for watching!
Hey, I was wondering. By calling the signal for example in your template directly would it not spam the api endpoint because everytime angular does its rendering it will call the signal and therefor send a request to the api?
Are you referring to the toObservable code? Reading a signal would not cause the signal to change, so it won't emit a value and won't issue an HTTP request. Or are you referring to something else?
Very clear as always. I realise the example is necessarily contrived for educational purposes but I was just wanting to check my understanding of a concept. If you were to reuse the userService on another page, as the todoService is provided in root, would it continue to issue HTTP requests on selectedUserId change or have I misunderstood something?
It probably won't matter. Since that other page probably WON'T change the "selectedUserId", HTTP requests won't be issued. In my strong opinion, the inclusion of "selectedUserId" into "UserService" is incorrect, and kinda violates the single responsibility principle. Each page would have its own "selectedUserId" as part of its state, not part of the user service
Thank you!
If I understand correctly what you are asking, yes, the services are provided "in root" and will therefore retain their values and any observables will continue to emit as changes occur.
This means that no mater where the user is in the application, if they change there user preferences or log out/log in as a new user, every component that listens for those changes will be notified.
I like to have a "single source of truth" for the state in my application. So I would have the user state managed by a single user service (or user state service if you want to separate the state management from the HTTP actions). Then each component that needed user state would reference the user service.
I don't understand how the system would react to a "global" change to the logged in user if they each had their own "selectedUserId" to manage?
@@deborah_kurata oh, I was thinking along the lines of a "product store", where you really choose a product from the shelf, and wanna see details about it, and then potentially have some other page share the same service. If we are talking about the logged in user, then yes it needs to be central. And, it may well be that you need to issue some HTTP requests if the logged user Id has changed - say to fetch up their profile data, or locale, or something… So, depending on the scenario, in my thinking, in one case you don't want HTTP requests, and in another, you do want them and need a global state…
Excelente video, me gusta mucho. Pero veo un problema, siempre se va a realizar un llamado a la API REST al inicializarse signal(0) que puede ser algo no deseado, alguna solución?
Signals seem so extremely easy to use.
When used by themselves, yes! There are a few more challenges when using them with RxJS ... but hopefully that will get easier over time as well.
Thanks for this amazing tutorial. I love your explanations. Could you give me an example of how to call backend in order to replicate the Task update?
Thank you so much!
Could you expand on your question? Are you looking for how to call http to put/post? Or something else?
@@deborah_kurata Yes. A backend pu call to update the "task" in a database for instance.
In the TodoService why did you convert the selectUserId to an observable and pipe it? Could you not have used computed? The computed would be making an http request call with the given selectUserId signal value. Each time the signal updates the computed would run. If this is not possible let me know because I am trying to replace rxjs/observables as much as possible with angular signals.
Yeah, using computed seems like an easier choice. But it doesn't work. Currently, the technique I demonstrated is the code required to react to a signal and issue an http request.
We can't use computed to issue an http request because issuing a request is a "side effect" and is asynchronous. From the Angular team: "The computation function is expected to be side-effect free: it should only access values of the dependent signals (and / or other values being part of the computation) and avoid any mutation operations. In particular, the computation function should not write to other signals (the library's implementation will detect attempts of writing to signals from computed and raise an error)." Reference: github.com/angular/angular/discussions/49683
Calling http is definitely a side-effect and should not be within a computed function.
More pragmatically, the syntax would be a bit challenging. Seems at first glance that something like this should work:
userTasksObs = computed(() =>
this.http.get(this.todoUrl + this.userService.selectedUserId()));
But this gives you a Signal.
We'd then have to somewhere read the signal and subscribe to the Observable to get the data.
this.toDoService.userTasksObs().subscribe(
tasks => this.toDoService.userTasks.set(tasks)
);
We could add the subscribe to the computed():
sub = computed(() =>
this.http.get(this.todoUrl + this.userService.selectedUserId()).subscribe());
But then we'd have a Signal ... which isn't what we want either. We'd still need to pipe the response through a tap to get at the response data.
sub = computed(() =>
this.http.get(this.todoUrl + this.userService.selectedUserId()).pipe(
tap(tasks => this.userTasks.set(tasks))
).subscribe());
And even then, this code won't execute unless the sub() signal is read somewhere: this.toDoService.sub().
Bottom line ... we don't end up with anything easier and "break" the rules regarding a computed and side effects.
(I wanted to think through this as well ... thanks for prompting the question!)
There have been some thoughts about using an effect instead of the code I presented:
tasksEffect = effect(() =>
this.http.get(this.todoUrl + this.userService.selectedUserId()).subscribe(
tasks => this.userTasks.set(tasks)
)
);
But then we still have to manage the subscription. (Plus some Angular team guidance has suggested not using effect to work with RxJS...)
Hi Deborah,
Thanks for such information content.
I just wanted to know..
Isn't it little bit irritating convert signal to observable then conver observable back ro signal.
Thanks...
Hi! And thank you!
I'm hoping as more signal features are implemented that this will become easier.
@deborah_kurata thanks for reply.. I think it will take a time to properly work with signal+rxjs specially when we are dealing with http services.
I am trying to create signal as a service as you have shown and it is working fine. But I have a query.
You are using this line `readonlyUserTasks = toSignal(...........)`
Is it just for automatic subscribing or unsubsubscribing..am i right here?
And the `userTask` is public now, we can directly change its value from component. Isn't it a problem.
Yes. That's one way to do it. As you said, it may time time to get the patterns right for working with signal + rxjs
I love all of your videos, your knowledge and presentation skills are the best. I have a question related to this video. I usually use httpClient but return a promise from the service so that I can use async/await. Then convert it into a signal or handle the errors from the caller. Could you help me understand what would be the advantages of just returning a signal and handling the errors from the service vs what I am doing. Thank you!
Thank you for the kind words!
It would be difficult to compare architectures without more knowledge, so you may be the best person to answer that question. 😊 If you have patterns that work for you and your team, there may be little reason to change it, as long as the component ultimately is working with signals.
But just FYI, unless you are using zoneless, it might be useful to examine some current issues with async/await and zone.js. Here are some links:
stackoverflow.com/questions/62658480/should-i-care-about-zone-js-does-not-support-native-async-await-in-es2017
github.com/angular/angular/issues/31730
@@deborah_kurata Thank you so much for responding so quickly. We are working on a new app and we want to give the new Angular features a go so we are pretty open to changing our implementation if it makes sense.
@@breakingdasystem I'm working on a new video now (for next week) that outlines a pattern that has emerged. This pattern is Redux-like and uses the best of RxJS and signals. That may be useful as you consider your options for your new app.
It's still in progress, but you are welcome to check out the sample code I have so far. I'd appreciate any feedback. You can find it here: stackblitz.com/~/edit/rxjs-signals-updatable-deborahk
@@deborah_kurata Will look now, you are the best, thank you!!
Hi Deborah, I have been following all of your videos and PS courses on observable data services and we have been implemented them in a new project. It is a different paradigm and working well so far. I am struggling with one aspect. One form is loaded with the selected object, lets call it a selected user. We have a custom validator to ensure that another field isn't set to the same value. So in the example for the user it may be a manager which would be selection of other users. It doesn't make sense to make someone their own manager. There is a custom validator on the form to ensure you are not selecting the same user as the manager. The select user id is passed to the custom validator as a parameter, and the validator. I am struggling to get this working as the form and validators are created in OnInit and the selected user is subscribed to in the async pipe. Do you have any example of this scenario?
Would it be possible to mock up this scenario (not the whole app, just the described feature) in a Stackblitz? Then I could take a clearer look at the specifics of your scenario.
@@deborah_kurata I will have a go at putting together a simple scenario, thanks
Wow nice...
Thank you!
Hello
Is there any intentions for a new Angular 16 course on pluralsight?
The entire Pluralsight library is currently being updated to Angular v16. The courses should start appearing in the library in the next few months.
(Pluralsight retired the "Getting Starting", suggesting that it was confusing to have both a "Getting Started" and a "Fundamentals".)
@@deborah_kurata That's great news to here ❤️ hope they will be realised soon
Just something I ran into in the comments - ideally, "selectedUserId" should not be part of the service. I understand this was done for simplicity. But ideally, as per the single responsibility principle, the service would just work with HTTP (and maybe some processing of it if necessary, although again…). But the selecting of a user should happen in a different place, inside of a specific state holder. Angular - unfortunately - does not provide any kinda stores (yet). That's bad because it would FORCE people to keep their state in the Stores, and not in other places like Services or wherever (Components for that matter!), and this way be more oganised. This quickly builds up and becomes an issue on complex pages with forms, tables etc
There are numerous "stores" available for Angular, including NgRx. But you are right, none of them are a built in part of Angular.
Especially with signals, it now becomes possible to define your own store, of sorts, using services. And it is feasible to create services that are are *just* the set of signals for a feature (therefore technically a "store") and move the retrieve and other HTTP features into a separate service.
`Elf` has minimal overhead and is quite convenient to use. I wonder how those guys are gonna react to the appearance of Signals. Because of right now, all stores return Observables, which is not necessary now
Hello Deborah, I have a doubt, when you make a mutation after a request like POST, PUT, etc. and you want to mutate the value of the request that has the data value, like you did in 14:10, creating a new signal to be the data bearer and the others just update its value. Using only rxjs, we should create a bearer also with a Subject or is there another way to update the value of a previously made http request?
Could you provide a little code snippet or a working stackblitz to illustrate your question?
In general, using purely RxJS for a data store, you need to hold the value (such as an array of products) in an Observable using something like a Subject/BehaviorSubject or use an operator such as scan to hold the value.
Something like this:
updatedProducts$ = merge(
this.products$,
this.newProduct$
).pipe(
scan((acc, value) =>
(value instanceof Array) ? [...value] : [...acc, value], [] as Product[])
)
This can get very messy. Using signals instead would be much cleaner, except for the fact that we can't currently update them. But even with that limitation, signals are much easier to use as a data store.
Here is an example of using a signal as a writable data store:
// If you did need a writable signal:
// Create the writeable signal
// Issue the http request
// Use tap to set the signal from the result
// Unsubscribe when the component is destroyed
// Subscribe to issue the http request
users = signal([]);
private sub = this.http.get(this.userUrl).pipe(
tap(data => this.users.set(data)),
takeUntilDestroyed(),
catchError(() => of([] as User[]))
).subscribe();
Then after a post or put you can update the array in the users signal using the signal update or mutate methods.
I am not able to paste the url, I think it is falling into spam
@@user-dh8td8sy4x What URL are you referring to?
@@deborah_kurata stackblitz url
can you show me a example of this "In general, using purely RxJS for a data store, you need to hold the value (such as an array of products) in an Observable using something like a Subject/BehaviorSubject" ?
Hello I want you to create a video tutorials on angular element using (Web component) standalone component. I think that will help a lot in simple html project where i can use angular elements
Thank you for the suggestion. Here is some information that may be useful: www.angulararchitects.io/aktuelles/angular-elements-web-components-with-standalone-components/
Hi Deborah. This particular line 'this.userTasks.mutate(() => task.completed = true)' in the ToDoService blew my mind. It works, it updates the intended ToDo, but how? You're not using the array that the mutate method receives? Is it because the reference passed to the markComplete method is the same as one the array items inside the userTasks signal and so changing one, changes this other?
Yes! We are working with object references here. So updating the object affects all places that it is referenced.
Think of it this way, you are on the list (an array) of "software developers" in your company. If you later spill coffee on your shirt, the "you" that is in that array of "software developers" has coffee on his shirt. LOL.
Some have suggested that it may be better practice to actually re-find the item in the array and update that. So what your team selects as "best practice" is up to the team.
@deborah_kurata Thank you for the quick reply 🙌 Yes, as usual, there's more than one solution. This is the solution I came up with, before seeing yours: this.userTasks.update((tasks) =>
tasks.map((t) => (t.id === task.id ? { ...t, completed: true } : t))
);
I don't know. Being used to enable OnPush on most on my components, it feels kinda wrong whenever I see the word MUTATE 😵💫 Do you know if it's OK to use mutate with libraries that enforce us to work with immutables(NGRX)? Or in those cases, it's best to stick to update? Thanks✌
@@alexandercisnerosvinelli5644 It's going to be interesting to see how this will all come together moving forward.
The Angular team is working toward making the *ngFor style looping reactive at the row level. So it would be much more performant to mutate the one row that changed (and have change detection only modify that one row) than to update the entire array (as is the style with NgRx) and have the entire array of items redisplayed.
I know that the NgRx team is closing watching signals and has already made some changes in support of signals. So it will be interesting how it changes how we think about mutable/immutable data.
@@deborah_kurata I thought that was already possible using trackBy😮
@@alexandercisnerosvinelli5644 To some extent, yes. More info on the *ngFor style looping will be coming out as a RFC in the next week or so.
My comments keep disappearing... Are links to Stackblitz not allowed?
Thanks for the great video series. I hope you are not done with Signal tutorials! Would love to hear about correct usage of effect. The Angular documentation states, "Effects are rarely needed in most application code..." and "Avoid using effects for propagation of state changes". Could/Should effects be used to add/remove dynamic validators to form controls based on other form values?
Thank you! (And I don't know the answer to your links question. I thought I'd provided Stackblitz links in YT comments before without issue.)
Regarding your question, the Angular team has kept effects in "developer preview" in Angular v17 because they don't feel they are done with them yet. There is a lot of discussion around when it should and should not be used. The team (and documentation) suggest not to use it often (mostly for debugging). But there are so many more use cases that it *could* be useful. Though the limitation of not updating any signals from an effect is also problematic, especially as we move most of our component data to signals.
Bottom line, I don't think there is a clear answer to your effects question at this point. Hopefully the Angular team will provide updates/clarity in the near term future.
mixing signals and observables is going to way confusing.
The hope is that it will become easier as more signal features are introduced.
It is working but I don't like letting unused field like your readOnlyUserTasks = toSignal(this.userTasks$, { initialValue: [] as ToDo[] }); just because it will automatically subscribe to the observable. I think a more cleaner approach (and also more easy to understand) is to add this.userTasks$.pipe(takeUntilDestroyed()).subscribe() inside a constructor.
Yes, there are many ways to accomplish the goal here. Another is to use an effect():
tasksEffect = effect(() =>
this.http.get(this.todoUrl + this.userService.selectedUserId()).subscribe(
tasks => this.userTasks.set(tasks)
)
);
And this could benefit from the takeUntilDestoyed() as well.