I've learned so much from your videos and want to say thank you for all the content you have created and continue to create. Your teaching techniques are unique, and your examples are easy to follow, making it easy to fully understand the topics you cover. You're Awesome Deborah!
This was serendipitous for me! I was struggling with this issue as the documentation is not clear. I just realized if you declare the service as 'root' but then use the providers attribute in your component, angular doesn't regard the service as a singleton and overrides the 'root' declaration. Thanks!
Hello Deborah, thank you for the tutorial. I noticed that you are using 2 effects. Since everyone keeps demoing effects inside a constructor, I got the wrong impression that we can have only one effect. I'm so glad that we're allowed to have more than one.
You're welcome! It's great to clear up misconceptions! 😊 Yes, you can have as many effects as you need. In my example, I could have made that one effect. But then it would log whenever either of the signals changed and it wouldn't be clear exactly when one changed vs the other.
@@deborah_kurata that's exactly the issues I was facing, but didn't know the solution until now. Ironically, I learned something on effect from a video on service scopes 😇
Thank you! I normally use RxJS operators for sequential HTTP calls. I haven't gotten into the async / await patterns. Maybe that's something I should look into?
@@deborah_kurata its something I have been trying to experiment with because I want to try and remove RxJS as much as possible for making HTTP Requests so that new devs can jump in and use Fetch with Async / Await - or something like that that they might be more used to. I have hear rumblings about RxJS becoming optional in future release so my assumption is Angular will use Fetch but who knows lol. Once again thanks for your videos and replies.
Thank you Deborah! It is worth to mention that the instance of the service provided at component level it is shared by all sub-components. Sub-components should not include the service in its providers array to access the parent component instance. So it is a singleton in the scope of its hierarchy. Am I correct?
Yes! That's correct. A service provided in a component is shared with its subcomponents. (But I think it would be confusing to call it a "singleton" in that case.)
Hello, good day. I have a question: I have an RxResource that handles an HTTP request, and I want it to trigger another RxResource to make another request as a secondary action when it finishes. How would I do that?
Hi! I'm planning on several other videos on rxResource to cover more scenarios. 😊 To answer your question, you could do something like this: // Get the posts postsResource = rxResource({ loader: () => this.http.get(this.postUrl).pipe( tap(() => console.log("Post Data Retrieved")) ) }) // Only after the posts, get the user for the first post userForPostResource = rxResource({ request: this.postsResource.value, loader: (posts) => this.http.get(`${this.userUrl}/${posts.request?.[0].userId}`).pipe( tap(() => console.log("User Data Retrieved", posts.request?.[0].userId)) ) }) See the sample project here: stackblitz.com/~/edit/secondary-request-rxresource-deborahk
@ Hi Deborah! Thanks for the great explanation and code example. I have a follow-up question: Is there a way to trigger the request without relying on any signal? For example, let’s say the first request is fine and updates a field, but then I want to fetch the updated list again. What would be the best approach to achieve this? Thanks in advance for your insights! 😊
@@cristophersaraosverdugo5934 The resourceRef has a reload() method that re-executes the loader function if you want to re-fetch the current data. That's also on my list for a YT video. 😊
I have not experimented with this, but my guess is: The shared instance would be created. But any component that provides the service would get its own instance of the service, not the shared instance. Any component (or other service) that injects the service and does not provide it would get the shared instance.
But let's clarify one thing for those who might be pondering about the word "Signals" in the title: this is just how Angular works and it is not specific to signals. The same principle of instantiation and lifespan applies also to a service with a subject, as well as plain regular fields.
Yes, you are correct. I should have made a point to say that. Where this is important to signals is when using resource and rxResource. When using RxJS, the data is retrieved when something subscribes, so you can control better when the retrieval works. With resource and rxResource, if you don't have a request parameter, the loader function will execute when the service is initialized.
It continues to be the best channel about Angular. Congratulations! 🎉🎉
Thanks so much! 😊
I've learned so much from your videos and want to say thank you for all the content you have created and continue to create. Your teaching techniques are unique, and your examples are easy to follow, making it easy to fully understand the topics you cover. You're Awesome Deborah!
This was serendipitous for me! I was struggling with this issue as the documentation is not clear. I just realized if you declare the service as 'root' but then use the providers attribute in your component, angular doesn't regard the service as a singleton and overrides the 'root' declaration. Thanks!
Glad it was helpful. And yes, you want to clearly decide whether to provide a service in root or component. You rarely ever would want both. 😊
Happy new year Deb!
Thanks for the lesson, really helped me😊
Beautifully explained ❤
Thank you! 😊
Informative as usual😉
Thanks! 😃
Hello Deborah, thank you for the tutorial.
I noticed that you are using 2 effects. Since everyone keeps demoing effects inside a constructor, I got the wrong impression that we can have only one effect. I'm so glad that we're allowed to have more than one.
You're welcome! It's great to clear up misconceptions! 😊
Yes, you can have as many effects as you need. In my example, I could have made that one effect. But then it would log whenever either of the signals changed and it wouldn't be clear exactly when one changed vs the other.
@@deborah_kurata that's exactly the issues I was facing, but didn't know the solution until now. Ironically, I learned something on effect from a video on service scopes 😇
Great / clear examples and video once again!! - Do you have plans to use Async / Await with sequential http calls?
Thank you!
I normally use RxJS operators for sequential HTTP calls. I haven't gotten into the async / await patterns. Maybe that's something I should look into?
@@deborah_kurata its something I have been trying to experiment with because I want to try and remove RxJS as much as possible for making HTTP Requests so that new devs can jump in and use Fetch with Async / Await - or something like that that they might be more used to.
I have hear rumblings about RxJS becoming optional in future release so my assumption is Angular will use Fetch but who knows lol.
Once again thanks for your videos and replies.
Great! Thanks 🌞
Thank u very much for ur efforts i hope to meet you one day ❤️
Thank you for watching! I'm often at Angular (like ngConf) and .NET conferences (such as VSLive).
Thank you Deborah! It is worth to mention that the instance of the service provided at component level it is shared by all sub-components. Sub-components should not include the service in its providers array to access the parent component instance. So it is a singleton in the scope of its hierarchy. Am I correct?
Yes! That's correct. A service provided in a component is shared with its subcomponents. (But I think it would be confusing to call it a "singleton" in that case.)
Hello, good day. I have a question: I have an RxResource that handles an HTTP request, and I want it to trigger another RxResource to make another request as a secondary action when it finishes. How would I do that?
Hi! I'm planning on several other videos on rxResource to cover more scenarios. 😊
To answer your question, you could do something like this:
// Get the posts
postsResource = rxResource({
loader: () => this.http.get(this.postUrl).pipe(
tap(() => console.log("Post Data Retrieved"))
)
})
// Only after the posts, get the user for the first post
userForPostResource = rxResource({
request: this.postsResource.value,
loader: (posts) => this.http.get(`${this.userUrl}/${posts.request?.[0].userId}`).pipe(
tap(() => console.log("User Data Retrieved", posts.request?.[0].userId))
)
})
See the sample project here: stackblitz.com/~/edit/secondary-request-rxresource-deborahk
@ Hi Deborah! Thanks for the great explanation and code example.
I have a follow-up question: Is there a way to trigger the request without relying on any signal? For example, let’s say the first request is fine and updates a field, but then I want to fetch the updated list again. What would be the best approach to achieve this?
Thanks in advance for your insights! 😊
@@cristophersaraosverdugo5934 The resourceRef has a reload() method that re-executes the loader function if you want to re-fetch the current data. That's also on my list for a YT video. 😊
@ ❤️❤️❤️❤️❤️ Thank you very much!!!!
If I keep providedIn: "root" and leave it as a singlet and add the service to the component's provider, is there a problem?
I have not experimented with this, but my guess is:
The shared instance would be created. But any component that provides the service would get its own instance of the service, not the shared instance. Any component (or other service) that injects the service and does not provide it would get the shared instance.
You legend!
But let's clarify one thing for those who might be pondering about the word "Signals" in the title: this is just how Angular works and it is not specific to signals. The same principle of instantiation and lifespan applies also to a service with a subject, as well as plain regular fields.
Yes, you are correct. I should have made a point to say that.
Where this is important to signals is when using resource and rxResource. When using RxJS, the data is retrieved when something subscribes, so you can control better when the retrieval works.
With resource and rxResource, if you don't have a request parameter, the loader function will execute when the service is initialized.
👏👏
🙏🏼😊