- 197
- 650 868
Deborah Kurata
United States
เข้าร่วมเมื่อ 22 เม.ย. 2009
Presenting new/interesting features in Angular and basics of Web development (HTML, CSS, JavaScript) with a bit of C# thrown in.
First Look at Angular's new resource() and rxResource()
Angular signals haven't had great support for asynchronous operations, until now! Angular v19, coming out next month, introduces a new experimental API called resource(). And an rxjs-interop API called rxResource(). These features revolutionize how we handle our HTTP requests!
In this video, we take a first look at both resource() and rxResource() and how you can leverage them in your projects.
*Links*
Code: stackblitz.com/~/edit/resource-first-look-deborahk
Code with extra features: stackblitz.com/~/edit/resource-first-look-extended-deborahk
TH-cam video: "Angular Signals: What? Why? and How?": th-cam.com/video/oqYQG7QMdzw/w-d-xo.html
TH-cam video: "Using toSignal and toObservable for RxJS interop": th-cam.com/video/xQIOWkBe5wQ/w-d-xo.html
Article: "Everything you need to know about the resource API": push-based.io/article/everything-you-need-to-know-about-the-resource-api
Article: "Asynchronous Data Flow with Angular’s new Resource API": www.angulararchitects.io/en/blog/asynchronous-resources-with-angulars-new-resource-api/
PR for resource: github.com/angular/angular/pull/58255
resource() source code: github.com/angular/angular/blob/0f2f7ec754a26c089c81cfdbb0ddc1fa8a269e16/packages/core/src/resource/resource.ts
rxResource source code: github.com/angular/angular/blob/0f2f7ec754a26c089c81cfdbb0ddc1fa8a269e16/packages/core/rxjs-interop/src/rx_resource.ts
*Content*
00:00 New features: resource() and rxResource()
00:35 resource()
01:41 rxResource()
03:25 Value Signal
04:56 Query Parameter
06:46 Multiple Query Parameters
08:26 resource() vs toSignal()
09:00 Updating the Data
10:38 Benefits of resource() and rxResource()
11:25 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and TH-cam content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 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).
View my TH-cam content: www.youtube.com/@deborah_kurata
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angularsignals
#angularstatemanagementwithsignals
#angularstatemanagement
#angulartutorials
#angularforbeginners
#angularbestpractices
#resource
#rxresource
#angularv19
In this video, we take a first look at both resource() and rxResource() and how you can leverage them in your projects.
*Links*
Code: stackblitz.com/~/edit/resource-first-look-deborahk
Code with extra features: stackblitz.com/~/edit/resource-first-look-extended-deborahk
TH-cam video: "Angular Signals: What? Why? and How?": th-cam.com/video/oqYQG7QMdzw/w-d-xo.html
TH-cam video: "Using toSignal and toObservable for RxJS interop": th-cam.com/video/xQIOWkBe5wQ/w-d-xo.html
Article: "Everything you need to know about the resource API": push-based.io/article/everything-you-need-to-know-about-the-resource-api
Article: "Asynchronous Data Flow with Angular’s new Resource API": www.angulararchitects.io/en/blog/asynchronous-resources-with-angulars-new-resource-api/
PR for resource: github.com/angular/angular/pull/58255
resource() source code: github.com/angular/angular/blob/0f2f7ec754a26c089c81cfdbb0ddc1fa8a269e16/packages/core/src/resource/resource.ts
rxResource source code: github.com/angular/angular/blob/0f2f7ec754a26c089c81cfdbb0ddc1fa8a269e16/packages/core/rxjs-interop/src/rx_resource.ts
*Content*
00:00 New features: resource() and rxResource()
00:35 resource()
01:41 rxResource()
03:25 Value Signal
04:56 Query Parameter
06:46 Multiple Query Parameters
08:26 resource() vs toSignal()
09:00 Updating the Data
10:38 Benefits of resource() and rxResource()
11:25 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and TH-cam content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 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).
View my TH-cam content: www.youtube.com/@deborah_kurata
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angularsignals
#angularstatemanagementwithsignals
#angularstatemanagement
#angulartutorials
#angularforbeginners
#angularbestpractices
#resource
#rxresource
#angularv19
มุมมอง: 4 000
วีดีโอ
First Look at Angular's new linkedSignal()
มุมมอง 7Kวันที่ผ่านมา
Angular version 19, coming out in November, will introduce a new experimental signal primitive: linkedSignal(). This video is a first look at linkedSignal() including its purpose and possible use cases. UPDATE: This feature is now in a prerelease of Angular v19: 19.0.0-next.11. I updated the code in the link below with the pre-release and added code to try out the new feature. *Links* Code: sta...
Angular Routing Explained
มุมมอง 3K14 วันที่ผ่านมา
Ever wonder how Angular routing works? The index.html file is the one true Web page of an Angular application. All of our views are displayed within this one page. Hence an Angular application is often called a "Single Page Application" or SPA. In most applications, we want five, ten, or hundreds of templates to take turns appearing on our Angular application's single page. How do we manage whi...
When to use take() vs takeUntilDestroyed()?
มุมมอง 3.2Kหลายเดือนก่อน
I was recently asked if it would be better to use take(1) or takeUntilDestroyed() when issuing an HTTP request with HttpClient. In this video, we examine the take() operator, and evaluate its use with HTTP operations. We crack open the Angular and RxJS source code. Then we compare the take(1) and takeUntilDestroyed() operators for use in HTTP requests. *Links* Code: stackblitz.com/~/edit/take-v...
Don't use takeUntilDestroyed() with Angular's HTTP PUT, POST, or DELETE?
มุมมอง 4.3K2 หลายเดือนก่อน
Should you use takeUntilDestroyed() with an HTTP PUT, POST, or DELETE operation? The short answer is "Probably not!". In this video, we walk through a PUT operation and examine the reasons why you should not use takeUntilDestroyed() for mutation requests. *Links* Code: stackblitz.com/~/edit/put-takeuntildestroyed-deborahk TH-cam video: "Use takeUntilDestroyed to Unsubscribe from Angular's Obser...
Synchronizing Select Boxes with an Angular Signal Effect
มุมมอง 6K3 หลายเดือนก่อน
Syncing multiple select boxes isn't always easy, especially when they are populated from HTTP requests. In this video, we'll first take a procedural approach to synchronizing select boxes with signals. Then change to a reactive approach, using a signal effect. *Links* Sample code (procedural approach): stackblitz.com/~/edit/sync-select-procedural-deborahk Sample code (effect approach): stackbli...
Currying for More Generalized Angular Code
มุมมอง 5K3 หลายเดือนก่อน
Currying transforms a function with multiple parameters into a sequence of nested functions each with a subset of those parameters. This allows for the partial application of a function. How is that useful? Currying can aid in DRYing our code. With DRY, or "Don't Repeat Yourself" the goal is to reduce or eliminate duplicate code. In this video, we examine what currying is and use it to minimize...
Declare Variables in Templates: Angular's New @let Declaration (v18.1)
มุมมอง 6K3 หลายเดือนก่อน
With @let, new in Angular v18.1, we can declare and assign local variables in our template. That's right, I said template! In this video, we'll look at the @let declaration syntax, walk through some common scenarios, and evaluate some early best practices for using @let. *Links* Code: stackblitz.com/~/edit/let-declaration-deborahk TH-cam video: "Angular's New Template Syntax: Control Flow": th-...
Angular's New @for Block Features
มุมมอง 4.2K4 หลายเดือนก่อน
The @for block, part of Angular's new control flow syntax, is great for repeating HTML elements in our templates. And it provides useful features such as an @empty block, odd and even row indication, and easier change tracking. In this video, we walk through five fun features of the @for block. *Links* Code: stackblitz.com/~/edit/fun-for-block-deborahk TH-cam video: "Angular's New Template Synt...
Build Generalized DRY Angular Code with Generics
มุมมอง 11K4 หลายเดือนก่อน
With DRY, or "Don't Repeat Yourself" the goal is to reduce or eliminate duplicate code, making our intent more clear. In this video, we'll examine techniques for using generics to build generalized functions in our Angular applications. *Links* Code: stackblitz.com/~/edit/stackblitz-generics-simple-deborahk TH-cam video: "Understanding Immutability in JavaScript": th-cam.com/video/DBZESPS-5mQ/w...
A Redux-like Pattern for Managing State with Angular signals
มุมมอง 11K4 หลายเดือนก่อน
Now that Angular signals have been out for a while, there are patterns emerging. In this video, we'll walk through one such pattern for managing state with signals. This Redux-like pattern leverages the best of signals and RxJS. *Links* Code: stackblitz.com/~/edit/rxjs-signals-redux-deborahk TH-cam video: "switchMap vs concatMap vs mergeMap": th-cam.com/video/RSf7DlJXoGQ/w-d-xo.html TH-cam vide...
Use takeUntilDestroyed to Unsubscribe from Angular's Observables
มุมมอง 5K4 หลายเดือนก่อน
The takeUntilDestroyed operator, introduced in Angular version 16, automatically unsubscribes from an observable when its component or service is destroyed. This prevents the need to manually unsubscribe. In this video, we examine the takeUntilDestroyed operator and how it can prevent memory leaks. We resolve a common error ("takeUntilDestroyed can only be used within an injection context") and...
Angular Injection Context Explained
มุมมอง 6K5 หลายเดือนก่อน
Ever wonder what an Angular injection context is? Angular's dependency injection system relies on a runtime context called the injection context. We can only use dependency injection in code that runs in that injection context. In this video, we explain what an injection context is, examine where the injection context is available, and walk through what happens when you inject a dependency outs...
Zoneless Angular Applications in V18
มุมมอง 19K5 หลายเดือนก่อน
Starting with v18, we can now build our Angular applications without zone.js. In this video, we examine what it means to be zoneless, how we go zoneless, and how going zoneless improves our Angular applications *Links* TH-cam video "Angular Signals: What? Why? and How?": th-cam.com/video/oqYQG7QMdzw/w-d-xo.html TH-cam video "Using toSignal and toObservable for RxJS interop": th-cam.com/video/xQ...
Access the Angular toSignal's read-only result as a writable signal!
มุมมอง 4K5 หลายเดือนก่อน
We can use toSignal to automatically subscribe to an HTTP get request and retrieve data. Cool! But you end up with a read-only signal. In this video, we examine a technique for storing a writable signal within a read-only signal so the retrieved data can be updated. NOTE: This technique was presented to me by Alex Rickabaugh from the Angular team, who approved this post. *Links* TH-cam video "A...
Angular's New Output API: Emit notifications from your child components
มุมมอง 5K5 หลายเดือนก่อน
Angular's New Output API: Emit notifications from your child components
Angular's New Model Inputs: Two-way Communication with your Child Components
มุมมอง 10K6 หลายเดือนก่อน
Angular's New Model Inputs: Two-way Communication with your Child Components
New(ish) DateOnly Type in .NET 6 (C# 10)
มุมมอง 5116 หลายเดือนก่อน
New(ish) DateOnly Type in .NET 6 (C# 10)
Automatically Migrate to Angular's New Control Flow Template Syntax
มุมมอง 2.5K7 หลายเดือนก่อน
Automatically Migrate to Angular's New Control Flow Template Syntax
Angular's New Template Syntax: Control Flow
มุมมอง 4K7 หลายเดือนก่อน
Angular's New Template Syntax: Control Flow
JavaScript Array with() Method (new in ES 2023)
มุมมอง 3.2K9 หลายเดือนก่อน
JavaScript Array with() Method (new in ES 2023)
JavaScript Array sort() vs toSorted() (new in ES 2023)
มุมมอง 2.3K9 หลายเดือนก่อน
JavaScript Array sort() vs toSorted() (new in ES 2023)
Understanding Immutability in JavaScript
มุมมอง 6K9 หลายเดือนก่อน
Understanding Immutability in JavaScript
Four Wishes for Angular Signals in 2024 - Happy Holidays!
มุมมอง 1.6K10 หลายเดือนก่อน
Four Wishes for Angular Signals in 2024 - Happy Holidays!
Using Angular Computed Signals for Cart Totals
มุมมอง 6K10 หลายเดือนก่อน
Using Angular Computed Signals for Cart Totals
Working with Arrays in Angular Signals
มุมมอง 16K11 หลายเดือนก่อน
Working with Arrays in Angular Signals
How Does RxJS Observable Error Handling Work?
มุมมอง 3Kปีที่แล้ว
How Does RxJS Observable Error Handling Work?
This is wonderful 😮😮😮
So what would be a good implementation in Angular v18 without the linkedSignal? Thanks in advance
❤❤❤
Excellent tutorial. Thanks for all the time and effort that you take to do this for us. You are the best. Wow!
That is very kind of you to say. Thank you! 😊
Thats a great addition. Now we just need some way to debounce signals, i don't want to spam the server with requests while the user is typing in the search field. Currently i'm using an rxjs observable with debounce and toSignal for this, but would be great if there was a signal only solution
Thanks so much , i love your explanation so much , Follow you from Egypt
I'll consider this new API as syntax sugar of the way Alex had introduced in this video: th-cam.com/video/aKxcIQMWSNU/w-d-xo.html&lc=UgzLINiOE616VnGxdQB4AaABAg.A8op9H13SrwA96TFOIQYj4
I think this could be very useful for input signals
Awesome video thanks for coming again with such a video🎉🎉
Great video as always. With signals and rxResource API and zoneless, can we conclude that RxJs is no longer needed and also component lifecycle hooks are no longer needed? Thanks for your feedback.
Excellent explanation. I'm about to start a new non-critical project in angular. Should start it with v18 ou v19-rc so that I have access to the RxResource API? Thanks for the advice.
Thank you
Pretty sweet!
👏🏻👏🏻👏🏻
🙏🏼🙏🏼🙏🏼
Great
Thanks!
Tutorials from this woman I can confidently auto-like before I start watching them. I've yet to un-like a single one.
😊 Thank you so much!
Another great video! Thanks Deborah!!
That is kind of you to say. Thank you!
What would we do without you Deborah ☀️ You're an absolute TH-cam gem 💎 Appreciate your work! 🙏
Wow, thank you! 😊
Thank you so much for this video. It's awesome !))
You forgot about respect/uvazhayu
That is kind of you to say. Thank you!
@fidgetmania Respect by default :)
Thanks for sharing, what about errors handling?
Thank you for watching! Error handling is definitely a topic I want to drill into a bit more. The resource has an error property, but it only seems to be set when the connection is dropped during the async request. For other errors (like 404), the resource error property isn't set because the server responds (even though that response is an error condition). I have on my list to do a video specifically about error handling with resource and rxResource. Thanks again!
my only advice would be at around 3:30... I would have explained more in depth how the relationships between the generics and the incoming arguments work. ie... If you dont pass in a type when calling logSignal.. the type will be inferred by the argument that was passed in etc etc. For example.. calling `logSignal<string>(this.mySignal) would error.. however `logSignal(this.mySignal)` would not.
How do you re initialize the value of the toSignal? I mean if we have a component which is printing some information by using the value we are getting from a toObservable and then passed to a toSignal, when you select another element, first you see the last thing you got from the Observable, and after that you see the new data, how do you clean up the toSignal o re start the initialValue
Have you seen the new resource/rxResource? If I understand you correctly, those new features may better suit your needs. th-cam.com/video/_KyCmpMlVTc/w-d-xo.html
i've watched a lot of your videos.. this one made me subscribe... thanks.
Awesome, thank you!
Interesting (and high quality as always). I couldn't quite work out how I might use this for infinite scroll. Also interesting that they seem to be first classing fetch? I only really use HttpClient for interceptors so that would be nice if it went.
Its sad that angular is slowly facing java's fate... The newer versions are so much better and have so many new features but people just dont want to migrate from the older versions
Your experience seems to differ a lot from mine. We're using Angular for our frontends and migrated to signals and standalone components for almost all of them. On the backend we're running on the JVM using Kotlin, which in many parts is an improvement to Java, even modern Java versions, from my point of view. However, aside from my work I'm active in the Java open source community and noticed a lot of projects that took a leap to newer Java versions. For a very long time Java 8 was the baseline frameworks and libraries targeted, but in the last 2 years more and more projects adjusted their baseline to Java 17 or even 21 and in turn started to modernize their codebases.
@JentaroYusong that's interesting I see newer products using newer versions of Java but older enterprise products still use Java 8 and migration isn't something people consider, one of my colleagues did a migration of our React product from 16 to 18 he had to work day night for weeks, stop any new updates to the repo, Rebasing PRs... I guess migration is more of a difficult task. But it's good to hear that people migrated to standalone components and signals so quickly
I’m migrating from 1.7 to 17. Standalone components made this feasible.
Teacher 💛
😊
Cool!!! I think Angular team is taking the things forward so passionately! Thanks Deborah, for a clear overview video.
Yep! Thank you for watching!
Great new feature!!
Yes it is! 😊
Thanks for your videos Deborah, you are a great teacher
Thank you! 😊
Somehow I have a feeling that this new API does a similar thing to what @ngrx/signal-store does with the rxMethod
This is looking amazing. I'll wait until developer preview for this one.
Yep! It definitely looks useful! 😊
Thanks Deborah for the video. As I understand, using 'resource()' with 'fetch' will be more reasonable for this update?
Thank you for watching! Personally, I'm a big fan of Observables and still really like having the Observable pipeline available for things such as debouncing, filtering, etc. (Though my simple example here didn't cover any of those more advanced scenarios.) At least for now, I plan to use rxResource. But there many developers that prefer a Promise-based approach and now they have the option.
Simple and very helpful, thanks for this video! You can make a video about named routes? E see named routes when i’m using google cloud console 😊
Great to hear. Thank you! 😊
Do you think “request” is a good name for dependencies?
No, I do not. I had suggested "parameters" and "request" instead of "request" and "loader". Maybe it will still change before it moves from experimental to stable? I realized when re-watching the video that I used "request" throughout to mean the HTTP request. Seems that could be easily confused then with the property name. Other than the naming, what do you think of the feature?
I wonder if Angular will allow HttpClient to return a Promise instead of Observable. That would remove the next need of rxResource for a lot of apps.
One of the team's goals is to make RxJS optional, so I would guess the opposite: that they work toward making resource/fetch more full featured so we wouldn't need HttpClient.
Thanks, teacher Deborah! This is the video I was waiting this week. Now that we have Resource Api, Angular (TanStack) query and SignalStore, what do you think will be the recommended way to easily manage server state (loading, error, success)? Do you think Resource api for server state and SignalStore for local state is a good combination? What do you think could be the best architecture for enterprise applications in modern Angular? Share your GDE thoughts with padawans. 🤩
Thank you for watching! I think resource/rxResource are still too new to make architectural recommendations. It will take some time for people to try it out. But I agree that resource/rxResource + SignalStore seem like a good combination.
Hi, Deborah! Love your educational content. We've refactored our old Angular 8 codebase to fully reactive Angular 18 thanks to your videos on signals and home-made signal store. I have a concern about writing the resource locally. It's purely vibes, I don't have data to support it, but doesn't writing to resource locally go against reactivity or declarativity?
A v8 -> v18 Wow! That was a big move. Congrats! When you say "writing to resource locally", are you referring to directly updating the signal returned from the server? Since these features are so new, I haven't tried them yet in a "full featured" application, but I envision that they would be incorporated into the service, so the component would not update it directly. Also, many of us are still waiting for the "signal forms" features to see how that affects the flow.
@@deborah_kurata Yes, that's exactly what I meant. Keeping it in the service didn't cross my mind, it sounds better now. Thanks! I know it's not a proper forms API, but as long as the inputs are somewhat simple, we can use native template binding with on input with [(value)] bound to a signal, and it's pretty reactive. At my work, the UI team for now made the input library compatible with Reactive Forms, template-driven forms and the new model signal binding without FormsModule at all. It looks rather messy, so can't wait for the proper signal forms.
Thank you for the useful and interesting information.
Thanks for watching!
Very clear, thanks.
Excellent! Thanks for watching!
🎉
😊
Nice feature, thank you for the heads up! It could indeed be an easy way to update values both in the browser context and in the persistence via an HTTP call. Maybe you'll show us a nice implementation in November 🙂
Thank you! Have you seen today's video as another option? th-cam.com/video/_KyCmpMlVTc/w-d-xo.html
And what if a component needs to change the state, but the component itself depends on this state?
Can you give me an example so I can better picture your scenario?
Please do some long length application in latest angular and signals and nestjs 🎉❤
Excellent content, Ms. Kurata. For the first time, I found clear explanations about how these operators work. Greetings from Brazil
Glad it was helpful! Thanks for watching!
Great🎉
Thanks! 😊
Great video-straight to the point with clear explanations.
Thank you! 😊
I get that there are situations where you might want to track a signal without having to read its value, but surely it would be better to add an overload to the existing *effect()* function rather than create an entirely new API? effect(() => this.quantity.set(1), [this.selectedProduct]);
An effect doesn't return a signal. linkedSignal declares a signal, making the code more declarative (defining everything about the variable when declaring the variable). Plus the general guidelines is to avoid effects whenever possible, so the team didn't want to add features to effects.
Thank you for the video! It's so short and clear
Great to hear. Thank you!
excellent !
Thank you! 😊
Instead of the example you made with http request used in a linkedSignal, should maybe the new angular v19 resource api be more suitable for that case? thanks for the video!
My next video is planned to cover the new resource API.