I 've been learning Angular since 2018, it was a complete change of paradigm of how to develop programs. Many other tutorials show different ways to do the same things, too confusing. This video clarifies a lot for me. Thanks million!
Hey Deborah! Your video really helped me grasp some RxJS concepts I've been struggling with for years. Thanks for breaking it down in such an easy-to-understand way!
Thank you so much Deborah! I've been struggling with RxJs for such a long time and this finally clarifies it for me! You are extremely gifted as a teacher and obviously poses a loooot of knowledge! Please keep making these videos, they are pure gold! Thanks again!
It was a blessing to find you, I work with Angular and It was really hard for me to grasp Rxjs, now I am one of the bests in my company and that's because of your pluralsight courses
Excellent video! It came in handing, since I'm learning Angular atm. Great work, by the way! Unfortunately it's not that common to see woman doing tutorials and videos like this in tech, big ups to you lady! God bless!
Thanks! Great video! Nice explanation of the patterns. Reactive programming is really a difficult paradigm to learn when you are beginning to learn it.
@@marlonchosky I have a new Pluralsight course on reactive programming here: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals You can apply for a free account to watch it if you don't have a Pluralsight membership.
@@deborah_kurata Sorry to ask this, but I'm finding myself in a tricky situation trying to implement a small functionality in the "reactive" way in angular with rxjs. Do you resolve online questions? And if you do, by what means could I contact you? Thanks in advance
Wowww Deborah, the first time I bumped into your videos. After watching tons of content on youtube, online courses or college professors, I can say that your explanations blew my brain!! Saying excellent to an explanation is not enough. Subscribed to your channel right now!! Thank you so much for your master class. :)
I have started learning Angular a week ago, coming from React I thought learning Angular would be a nightmare, but with your tutorials and the way you teach I'm breezing past it, thank you very much!
That brought a smile to my face this morning. Thank you! If you are interested, here are some playlists: Angular topics (new features/patterns): th-cam.com/play/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV.html Angular signals: th-cam.com/play/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB.html Signals + RxJS: th-cam.com/play/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq.html All the best!
Whole heartedly agree with other comments. Thank you, @Deborah Kurata, for taking the time and energy to explain something not so easy to understand, for free on TH-cam. Even after purchasing Udemy tutorials, I did not get a clear understanding. Finally, I found your channel and RxJS concepts seem to finally fall into place !
Hey Deborah, I came to know about you through ngConf videos and I'm really glad to have found your tutorials. You are really amazing at teaching and explaining topics and that too in a way which is reactive and correct way to learn and implement things. Thank you for your contribution in community learning.
Im on to declarative programming for a while now, In my experience, if you combine it with NgRx, you will end up with easier to reason about code, and easier to debug when things go wrong. Aditionally I must say that the quality of your videos is excelent, Im really enjoying watching your videos, thank you a lot for makis this videos
The clarity and directness of your video are greatly appreciated. Thank you for delivering such high-quality content. Are there any plans to release courses on other platforms, such as Udemy?
Thank you so much! I had difficulty getting through the "verify it is you" phase of Udemy. And I couldn't find anyone/anywhere to get help to get past it. I do have several courses here on TH-cam: Git/GitHub, Intro to Programming, HTML, CSS, Bootstrap, and JavaScript. I also have several Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Hi Deb, what if using the declarative Data access pattern related to products$, you also need p.e. to subscribe in ngOnInit method to transform data before passing to child component? Altough async pipe is taking care of unsubcription, due you also subscribed at ngOnInit(), do you actually need to unsubscribe or just one async pipe at comp level manages all unsubscriptions happening? Would this breake the declarative data acces patern?
I'm not sure I understand the question. Using the declarative data access pattern you can still pipe the data, transforming it as necessary. For example: product$ = this.productService.selectedProduct$ .pipe( catchError(err => { this.errorMessageSubject.next(err); return EMPTY; }) ); You could add code within the pipe here to perform any needed data transformation. OR You can perform the transform in the service so that product$ already has the filtered data. Like this: selectedProduct$ = combineLatest([ this.productsWithCategory$, this.productSelectedAction$ ]).pipe( map(([products, selectedProductId]) => products.find(product => product.id === selectedProductId) ) ); The async pipe handles the subscribe and unsubscribe ONLY for the observable it uses. RxJS automatically handles and subscribe/unsubscribe for higher order mapping operators (such as mergeMap) and for any *references* to that same observable. For example, in the above code if you have an async pipe that uses product$, it will automatically subscribe and unsubscribe to product$. And since product$ is a reference to selectedProduct$ in the service, that Observable is subscribed and unsubscribed. Did I understand the question?
@@deborah_kurata Yes and no, but thank you very much for the detail of your answer. So let´s say I want product$ in the template making use of the async pipe, as a variable to display the productId at the title of a reusable card component. And let´s say a colleague takes the day after this same component and because a transformation is requierd before passing data to child, instead of piping the stream, he subscripe at ngOnInit to do so. Would it be my colleague´s subscription unsubscribed by my async pipe at template or ngOnDestroy is now needed?
@@hugoherradorcarrasco3261 When working with unicast Observables, like in this example, you can think of a subscription like a wire. Subscribing creates the wire between the source of the emissions (often an HTTP request) and the code. Each emission then follows that wire from the source to the code. Each subscription is it's own wire. On unsubscribe, the wire is cut and no more data can follow that wire from the source to the code. So, when your async pipe unsubscribes, it cuts the wire between the observable source and your template. It does *not* impact your colleagues wire. A separate subscribe ngOnInit creates it's own wire that must then be unsubscribed/cut. Does that make sense?
Couldn't find said video but I find same difficulty making sense on: 24:41 Where does the unsubscribing happens if at all for categorySelectedAction$? I get prods$ is probably un/subscribed in the template using async pipe, same for the fetching in the inner observable(switchmap handles it), however for said var the un+subscribing happens implicitly in a way that alludes me This is obviously a common use case of 1 observable relying on another one that too, has a relation to a third (inner) one. And as long as I have this public platform, I must also comment on the high clarity of videos and the content itself, kudos!
Thank you so much! Yes. Whenever you see this type of syntax: selectedVehicle$ = this.vehicleService.selectedVehicle$.pipe(...) If an async pipe subscribes to the observable on the left, it automatically subscribes to the observable on the right. That includes unsubscribe as well. Same for code like this: vm$ = combineLatest([this.vehicles$, this.selectedVehicle$, this.vehicleClasses$]).pipe( map(([vehicles, selectedVehicle, vehicleClasses]) => ({ vehicles, selectedVehicle, vehicleClasses })) ); Subscribing to vm$ with an async pipe automatically subscribes/unsubscribes to all of the referenced observables: vehicles$, selectedVehicle$, and vehicleClasses$. You can try this out using my github repo here: github.com/DeborahK/Angular-ReactiveDevelopment (In this repo, I use vehicles and vehicle classifications instead of products and product categories, but the basic concepts are the same.)
@@deborah_kurata I really appreciate you answering even older videos, that's uncommon. Thank you very much for the detailed explanation, it seemed logical to me that it'd work in similar way, but I couldn't find answer in the docs and I don't like to rely on intuition when it comes to my code.
At the "USING PIPE" slide, is there a missing ")" at the end of the second row starting with "tap"? I really enjoy your videos and explanations. -- THANK YOU!
Thanks for a great video! I've been learning so much about RxJS from your talks here and also ngConf! One question - how do you test an Observable inside a function? Especially if it's not called via ngOnInit? It would be great if you did a video around testing Observables with various pipes. 🙂
regarding declarative approach at 18:10. Is not better to use the products$ (from service) instead of creating new same local variable in component. It would be like this in template: *ngIf="productService.products$ | async as products"? - less code, more readable. p.s: my subjective opinion
This may be one of those "personal preference" things. I much prefer for my component/template to be encapsulated. Anything that the template needs should be in the component. From the docs here: angular.io/guide/architecture-services "A component should present properties and methods for data binding to mediate between the view and the application logic."
This video was fantastic and helped me understand RxJS much better. However, I have one question: when should I use the reactive pattern versus the imperative pattern? Is the reactive pattern always the better choice?
Thank you! Reactive vs imperative pattern is a personal (or team) choice. My preference is to go reactive as much as possible. And now with the new signal features, there are more ways to "go reactive"!
Thank you for watching. I just created a video that suggests that it be used as a sample (from scratch) project. You can find it here: th-cam.com/video/LHgJP7MwTWY/w-d-xo.html
One point mentioned, switchMap doesn’t cancel requests, this might lead to confusion, switchMap internally just unsubs from the observable provided to it: the inner observable. If that inner observable implemented cancelation logic on unsub only then will the request be cancelled, not knowing this this can have unexpected results when using switchMap on DELETE, PUT, PATCH requests as one might expect this to be cancelled. Managing side effects is what this ultimately is about.
I was talking about HTTP requests, but you are right, I wasn't clear that I was talking about *only* HTTP requests using Angular HTTPClient. And yes, when using HTTPClient it does indeed cancel any inflight requests. See more info here: github.com/angular/angular/blob/main/packages/common/http/src/xhr.ts#L317 This should cancel any request (DELETE, PUT, PATCH) if it has not yet been processed. You are correct that if the backend already performed the delete, it is not going to "undo" it.
@@deborah_kurata the principle of the observable is that it has a predictable contract of next, completed, error the cancelation (even mentioned in documentation rxjs btw wrongly under switchMap) but it is a conceptual leap to what it can do for us but it’s these leaps that bring confusion when using switchMap differently as cancelation (or abort controlling) is just a different thing. Ultimately the side effect performed is solely affected if the right side, HTTP in this case adheres to working on one of the observable contract’s specifications. By treating observables as a primitive we can move the community to see it more as a new paradigm to code as apposed to a set of instructions to adhere to common scenarios.
Great video Deborah! I find it very useful, although I am not the video learner kind of person. Is there a pdf that I can read offline possibly? Thanks a lot, Damian
Thank you! One option you can try is to copy and save the transcript/subtitles. If you want to give it a try, there are instructions here: www.rev.com/blog/resources/how-to-download-youtube-subtitles-as-text-files
I loved the explanation and it helped me a lot to better understand MergeMap and ConcatMap. But I really wanted to find a tutorial, article, book or code example using Rxjs and Declarative Approach in all CRUD but I just can't find it anywhere. If anyone could help me...
Thank you. For full state management/CRUD I'd recommend using a tool such as NgRx. If you'd like to see an example of CRUD with a reactive approach, I have one here: github.com/DeborahK/Angular-RxJS/tree/master/APM-WithExtras See specifically product-edit.service.ts. It uses scan to cache the set of data and allow create/update/delete operations against it. However, with the new signals features coming, this will change (and hopefully be a bit easier to work with).
hi, your content both on TH-cam and your courses on PluralSight have been key in helping my move to a more reactive approach using RxJS. Im not going to pretend that I haven't found it tough though. Something I am struggling with at the moment is automatically refresh data based on current status. I have an observable containing an array of data that is being displayed. I have a requirement that if one of values of the records is "In Progress" we need to poll and keep refreshing the data every x seconds until we no longer have any that are "In Progress". Do you have an example or thoughts on how to achieve this?
So glad to hear the content was useful. I'd like to do some sample code to answer your question. I've recently had a family emergency and will be out another week.
Hi @Deborah Kurata. If data returned is in the shape below- export interface IPagedResponse { data: T[]; result: boolean; responeCode: number; message: string; } And I want to display data part only. How can I use async pipe *ngIf="products$ .dat | async as products
Parentheses help in this case. Here is code from one of my projects: For your example, it would be something like this: *ngIf="(products$ | async)?.data as products"
How to adapt the declarative data access approach for http calls with parameters? for example, get a user with their ID? and should we change the userId to signal and then use computed to do the http call??
Use an RxJS Subject to emit the value to be used at the parameter. I have an example here: stackblitz.com/~/edit/sync-select-subject-deborahk?file=src/todo.service.ts
@@deborah_kurata gotcha! In this case Subject is used instead of signal cuz we want to subscribe and react to it to do the http call? so can I say signal is more for data display instead of for data pulling. for data pulling, behaviorSubject or Subject is still better?
@@yunm1824 Signals are for managing state. They always have to have a value. A computed signal is for reacting to value changes, but computed doesn't support async operations. Subject/BehaviorSubject is great for responding to actions when dealing with async operations (such as an http.get). So to react to synchronous changes, use a computed signal where possible. To react to asynchronous operations (such as http.get), Subject/BehaviorSubject work well. Or, if the action is caused by a user operation, you can use events. Here is an example that uses the user-driven event: stackblitz.com/~/edit/sync-select-procedural-deborahk?file=src/todo.service.ts
Hello @DeborahKurata I have been working a lot with RxJS and I’m wondering which would be the best approach to dealing with multiple valueChange observables subscription with Angular Form or is better grouping all this subscription with one operator and then use the async pipe.Thanks for this excellent material like always.
Hey! Thank you for the kind words about the video. Yeah, it's difficult to recommend an approach without more information about the specific scenario and code example. If you'd like to build a little stackblitz with a small example of the options you are considering (not your entire app), I would be able to provide a bit more of an opinion. ☺
Deborah, sorry to bother you, do you have more information, articles, or places where I can find more patterns associated with writing declarative code with RxJS?
I have more videos in my RxJS playlist here on TH-cam: th-cam.com/play/PLErOmyzRKOCrtHaQk-qiq3YhhD_J7K9rA.html The "4 Wicked Pipelines for RxJS in Angular" (th-cam.com/video/wQ8jXlWMoCo/w-d-xo.html) might be of interest. I also have a new RxJS course on Pluralsight: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
@@deborah_kurata It's one of the streaming services in the Subscriptions sections. It was a (relatively) short lived streaming service built on the premise of short, "quick bites" (Quibi) of episodes. For example they did like 15 minute version of 60 Minutes. Before tech I worked in entertainment and it's a relatively notorious tech startup in TV/Film.
I think the idea to say that “what we have”: is an action is not the best abstraction, what we have is a user taking an action and not a subject, which in itself could follow that rotation of what we have, what we want and when, since that observable follow that same idea. To clearly define the first step is really about determining or in this case rebasing the source stream, which in this case are clicks$ instead of a get$. First step is (re)basing the right source$
You are correct in that the "What do we have?", "What do we want?" and "When do we want it?" are a bit of an oversimplification. For many starting out with the complexities of RxJS, that simplification is helpful. For those with a deeper understanding of RxJS, it may be less helpful.
@@deborah_kurata I agree that the idea to bring that was is easier to digest is good. But also it’s the principle understanding that paves the foundation of this technology is what the community today misses. So for example the idea that a source is very much the starting of a stream and relaying that source stream to bring most purity by making longer pipes is what makes for a great approach, also easy to digest: as everyone understands that a constant stream of data is much more a system as sprinkling logic here and there which at some point might or might not have a small stream. Similar to how the Panama kanal proved an assets when it’s source was relayed (there are probably way more effective metaphors to be found) I just think that the idea of a action stream has that same loop, because what we have, want, when is already nested thus complicated the moment we for example debounce clicks$ or typings$
Thanks! I basically took snippets of code from several of my projects/courses to demonstrate the concepts in this video. So I don't really have all of the code you see in one project. This one may be the closest: github.com/DeborahK/Angular-RxJS Let me know if that's close to what you are looking for.
First example is actually problematic, because it returns an observable wrapped in a function whilst no arguments are expected, by doing this you take away the opportunity to multicast the observable effectively, as each calling gets an unique observable. Operators like shareReplay that effectively cache the response would become unusable in that sense. Funny that the angular documentation lists examples like this while it could bring confusion when you really want to compose observables in meaningful ways down the line.
Could you provide a time code or a bit more so I have context on what you're referring to as the "first example"? Are you referring to the first pattern? Or one of the examples as we cover the terms? If you are referring to the first pattern: "Classic Pattern for Retrieving Data: Service", then no. It is returning an Observable, not an Observable wrapped in a function. Could you elaborate?
@@deborah_kurata getproducts$ returns an observable wrapped in a function, in that way the problematic side is that observables just like functions are callable, observables are functions. Whereas wrapping an observable when not providing arguments is like wrapping a wrapping if that makes sense. Therefor it is strange that this is part of the angular documentation because it immediately educates the wrong principe, there is mostly no reason to wrap an observable except if wanting to provide specific arguments, but also for that it’s better to relay the stream to be one of actions$ as you also show later on.
These are great examples, but I think you should feature or highlight the selectedCategoryChanged function below more, because it's easy to forget. private categorySubject = new Subject(); categorySelectedAction$ = this.categorySubject.asObservable(); selectedCategoryChanged(categoryId: number): void { this.categorySubject.next(categoryId); } I had to watch a few times and it clicked, but you can't do some of these patterns if the observable isn't emitting anything, and it's easy to forget exactly how it happens. In the code, selecting an item from the dropdown will pass that item's categoryId to the selectedCategoryChanged function which then emits the value using .next(), and with data being emitted then the patterns can take place!
The best RxJs video I've ever seen. Simple, clear, logical without unnecessary rocket science.❤
Wow, thanks!
This is hands down the best explanation I've encountered. Everything now fits in place. Absolutely underrated channel! Thank you so much!
Great to hear! Thank you!
I was going insane trying to understand Observables and your explanation finally flicked the lightbulb on. Thank you!
Great to hear! Glad it was helpful! All of the best on your continued enlightenment! 😀
Deborah is posting Angular and RxJS videos on YT! Cheers from Brazil, teacher! YAY!
😊 Cheers to you! Thank you for posting!
I love the way you make complex things easy to understand. That's the best video on RxJS. Thanks for all the hard work you do to make these videos.
Thank you so very much! 😊
You are a legend Deborah, I learned Angular thanks to your videos. Thank you!
Wow, thank you! 😊
I am familiar with almost all of these. But i still watched it. And got valuable information info.
I love to watch whatever you explain.
Thanx
I appreciate that! Thank you!
Thanks Deborah for the Rxjs course. This is the best one I've come across.
Wow, thank you! Glad it was helpful!
This is the best video on RxJS I've ever seen and it was incredibly helpful!
Thank you so much!
Your comments are so kind. It's great to hear that these videos are useful.
Thank you!
I 've been learning Angular since 2018, it was a complete change of paradigm of how to develop programs. Many other tutorials show different ways to do the same things, too confusing. This video clarifies a lot for me. Thanks million!
So glad to hear it was helpful! Thanks!
DK is the best at explaining complex topics in plain English. I watched all of her videos in Pluralsight and attended her sessions at conferences.
That is great to hear! Thank you so much! All the best!
Been a big fan and taken your courses on Pluralsight and learned a lot. Thanks a lot for posting this sort of content for free on TH-cam
Thank you for watching!
Hey Deborah! Your video really helped me grasp some RxJS concepts I've been struggling with for years. Thanks for breaking it down in such an easy-to-understand way!
So very glad to hear it was helpful. Thank you!
Thank you so much Deborah! I've been struggling with RxJs for such a long time and this finally clarifies it for me! You are extremely gifted as a teacher and obviously poses a loooot of knowledge! Please keep making these videos, they are pure gold! Thanks again!
It's wonderful to know that the videos are helpful. Thank you!
Deborah you really know how to simplify things. Thanks
Thank you so much!
i seriouslly want to say big thank you for providing such a great video on Rxjs patterns ..i love it...🤟
Glad you enjoy it! Thanks for watching!
The best and simplest explanation of RxJs and reactive programming I've ever found 🚀. Thanks a lot .❤
Wow! Thank you so much! 😊
IM so happy to find your videos in TH-cam Deborah! AMazing work as usual!
That is kind of you to say. Thank you!
I watched this video again to refresh my memory. The presentation and example are so much better than the Pluralsight videos. Thank you.
Glad it was helpful! Thank you!
It was a blessing to find you, I work with Angular and It was really hard for me to grasp Rxjs, now I am one of the bests in my company and that's because of your pluralsight courses
Great job! So great to hear that! Thank you!
This explanation of RXJS the best one ! So clear, so simple and with such a good examples! Thanks a lot! 👏🏻👏🏻👏🏻
Glad you liked it!! Thanks for watching!
Excellent video! It came in handing, since I'm learning Angular atm. Great work, by the way! Unfortunately it's not that common to see woman doing tutorials and videos like this in tech, big ups to you lady! God bless!
Thank you! 😊
Thanks! Great video! Nice explanation of the patterns. Reactive programming is really a difficult paradigm to learn when you are beginning to learn it.
Thank you so very much! I'm glad the video was helpful!
@@deborah_kurata do you have a course about reactive programming with angular? Or can you recommend me someo e?
@@marlonchosky I have a new Pluralsight course on reactive programming here: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
You can apply for a free account to watch it if you don't have a Pluralsight membership.
@@deborah_kurata Sorry to ask this, but I'm finding myself in a tricky situation trying to implement a small functionality in the "reactive" way in angular with rxjs. Do you resolve online questions? And if you do, by what means could I contact you?
Thanks in advance
Is it something you can put into a small stackblitz demo? If so, you can post the link here and I'll take a look.
Thank you Deborah. This is a really useful topic which is provided in a very simple and meaningful way.
Glad it was helpful! Thanks!
Wowww Deborah, the first time I bumped into your videos. After watching tons of content on youtube, online courses or college professors, I can say that your explanations blew my brain!! Saying excellent to an explanation is not enough. Subscribed to your channel right now!! Thank you so much for your master class. :)
Wow, thank you! That is so kind of you to say.
This is what I looking for so long, finally got it. Sharp and clear.
So glad it was helpful!
I have started learning Angular a week ago, coming from React I thought learning Angular would be a nightmare, but with your tutorials and the way you teach I'm breezing past it, thank you very much!
Great to hear! Glad I could help. All the best on your learning journey.
Omg! The explanation makes it look very easy and it makes me feel i know everything way before. Thanks for the video, keep doing more.
That brought a smile to my face this morning. Thank you!
If you are interested, here are some playlists:
Angular topics (new features/patterns): th-cam.com/play/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV.html
Angular signals: th-cam.com/play/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB.html
Signals + RxJS: th-cam.com/play/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq.html
All the best!
The best thing about your videos are having marble diagrams, thanks a lot.
Love those marbles! 😊
Whole heartedly agree with other comments. Thank you, @Deborah Kurata, for taking the time and energy to explain something not so easy to understand, for free on TH-cam. Even after purchasing Udemy tutorials, I did not get a clear understanding. Finally, I found your channel and RxJS concepts seem to finally fall into place !
So glad to hear it was helpful! Thank you. 😊
We're switching to reactive programming and this is gold good job! I'll be checking you out on pluralsight as well. Thanks!
Excellent! All the best!
Your source is so good for me to understand well enough, thank you so much.
Glad it was helpful! Thank you for watching!
Hey Deborah, I came to know about you through ngConf videos and I'm really glad to have found your tutorials. You are really amazing at teaching and explaining topics and that too in a way which is reactive and correct way to learn and implement things. Thank you for your contribution in community learning.
That is wonderful to hear! Thank you so much!
Im on to declarative programming for a while now, In my experience, if you combine it with NgRx, you will end up with easier to reason about code, and easier to debug when things go wrong. Aditionally I must say that the quality of your videos is excelent, Im really enjoying watching your videos, thank you a lot for makis this videos
Thank you! And yes!
I do have a few videos on NgRx on my YT channel ... but probably things you already know if you use NgRx now.
Thank you so much Deborah! This video was so helpful and concise. Great examples, metaphors, and mnemonics to help nail down these concepts.
Thank you for the kind feedback! Glad to hear it was helpful!
Good too see you YT. Your pluralsight course help me alot
Good to see you too. Thanks for watching the video.
Glad to hear that my Pluralsight course was helpful. Thank you!
All the best.
What an explanation! Crisp and Clear. Thanks
Thank you! Glad it was clear!
I watched your angular course on pluralsight, Thanks for such a great content. Learned alot from it. Cheers from India :)
Glad it was useful! Thanks!
+1
@@yanis68 Try this: app.pluralsight.com/library/courses/rxjs-angular-reactive-development
Great content thanks for sharing your knowledge from Pluralsight to YT. I'm a big fan of yours and learned a lot on your tutorials on Pluralsight.
Thank you for the kind words! 😊 So great to hear that the tutorials were helpful!
Deborah, I appreciate you so much. This is the best.
Thank you so much!
You're an absolute life-saver!! Thank you so much Deborah for this video, it has cleared a lot of my questions 😊 Sent you a LinkedIn request as well 😉
Glad it was helpful! Thank you for watching!
The clarity and directness of your video are greatly appreciated. Thank you for delivering such high-quality content. Are there any plans to release courses on other platforms, such as Udemy?
Thank you so much!
I had difficulty getting through the "verify it is you" phase of Udemy. And I couldn't find anyone/anywhere to get help to get past it.
I do have several courses here on TH-cam: Git/GitHub, Intro to Programming, HTML, CSS, Bootstrap, and JavaScript.
I also have several Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Thank you for your time and one of the best explanation ever!
That is great to hear. Glad it was helpful. Thank you!
Thank you so much! You made this complex subject so easy to digest! ❤
Glad it was helpful!
i'm big fan of you,i've follow all your course on Pluralsight !
Nice! Thank you! 🙏
Hi Deb,
what if using the declarative Data access pattern related to products$, you also need p.e. to subscribe in ngOnInit method to transform data before passing to child component? Altough async pipe is taking care of unsubcription, due you also subscribed at ngOnInit(), do you actually need to unsubscribe or just one async pipe at comp level manages all unsubscriptions happening? Would this breake the declarative data acces patern?
I'm not sure I understand the question.
Using the declarative data access pattern you can still pipe the data, transforming it as necessary. For example:
product$ = this.productService.selectedProduct$
.pipe(
catchError(err => {
this.errorMessageSubject.next(err);
return EMPTY;
})
);
You could add code within the pipe here to perform any needed data transformation.
OR
You can perform the transform in the service so that product$ already has the filtered data. Like this:
selectedProduct$ = combineLatest([
this.productsWithCategory$,
this.productSelectedAction$
]).pipe(
map(([products, selectedProductId]) =>
products.find(product => product.id === selectedProductId)
)
);
The async pipe handles the subscribe and unsubscribe ONLY for the observable it uses. RxJS automatically handles and subscribe/unsubscribe for higher order mapping operators (such as mergeMap) and for any *references* to that same observable.
For example, in the above code if you have an async pipe that uses product$, it will automatically subscribe and unsubscribe to product$. And since product$ is a reference to selectedProduct$ in the service, that Observable is subscribed and unsubscribed.
Did I understand the question?
@@deborah_kurata Yes and no, but thank you very much for the detail of your answer.
So let´s say I want product$ in the template making use of the async pipe, as a variable to display the productId at the title of a reusable card component.
And let´s say a colleague takes the day after this same component and because a transformation is requierd before passing data to child, instead of piping the stream, he subscripe at ngOnInit to do so.
Would it be my colleague´s subscription unsubscribed by my async pipe at template or ngOnDestroy is now needed?
@@hugoherradorcarrasco3261 When working with unicast Observables, like in this example, you can think of a subscription like a wire. Subscribing creates the wire between the source of the emissions (often an HTTP request) and the code. Each emission then follows that wire from the source to the code. Each subscription is it's own wire.
On unsubscribe, the wire is cut and no more data can follow that wire from the source to the code.
So, when your async pipe unsubscribes, it cuts the wire between the observable source and your template. It does *not* impact your colleagues wire. A separate subscribe ngOnInit creates it's own wire that must then be unsubscribed/cut.
Does that make sense?
@@deborah_kurata Yes it does. Thank you!
Couldn't find said video but I find same difficulty making sense on: 24:41
Where does the unsubscribing happens if at all for categorySelectedAction$?
I get prods$ is probably un/subscribed in the template using async pipe, same for the fetching in the inner observable(switchmap handles it), however for said var the un+subscribing happens implicitly in a way that alludes me
This is obviously a common use case of 1 observable relying on another one that too, has a relation to a third (inner) one.
And as long as I have this public platform, I must also comment on the high clarity of videos and the content itself, kudos!
Thank you so much!
Yes. Whenever you see this type of syntax:
selectedVehicle$ = this.vehicleService.selectedVehicle$.pipe(...)
If an async pipe subscribes to the observable on the left, it automatically subscribes to the observable on the right. That includes unsubscribe as well.
Same for code like this:
vm$ = combineLatest([this.vehicles$, this.selectedVehicle$, this.vehicleClasses$]).pipe(
map(([vehicles, selectedVehicle, vehicleClasses]) => ({
vehicles,
selectedVehicle,
vehicleClasses
}))
);
Subscribing to vm$ with an async pipe automatically subscribes/unsubscribes to all of the referenced observables: vehicles$, selectedVehicle$, and vehicleClasses$.
You can try this out using my github repo here: github.com/DeborahK/Angular-ReactiveDevelopment
(In this repo, I use vehicles and vehicle classifications instead of products and product categories, but the basic concepts are the same.)
@@deborah_kurata I really appreciate you answering even older videos, that's uncommon.
Thank you very much for the detailed explanation, it seemed logical to me that it'd work in similar way, but I couldn't find answer in the docs and I don't like to rely on intuition when it comes to my code.
Thank you deborah i'm learning a lot from your videos
Great to hear! Thank you!
At the "USING PIPE" slide, is there a missing ")" at the end of the second row starting with "tap"? I really enjoy your videos and explanations. -- THANK YOU!
You are correct. Thank you. Bummer that there isn't a way to edit the content of a YT video. :-)
The best video on RxJS.
Thank you! 🙏🏼
Why it took so longer to find your tutorial ? I love this tutorial and your pluralsight course too..
Thanks for a great video! I've been learning so much about RxJS from your talks here and also ngConf! One question - how do you test an Observable inside a function? Especially if it's not called via ngOnInit? It would be great if you did a video around testing Observables with various pipes. 🙂
Great suggestion! I'll add it to the list!
regarding declarative approach at 18:10. Is not better to use the products$ (from service) instead of creating new same local variable in component. It would be like this in template: *ngIf="productService.products$ | async as products"? - less code, more readable.
p.s: my subjective opinion
This may be one of those "personal preference" things. I much prefer for my component/template to be encapsulated. Anything that the template needs should be in the component.
From the docs here: angular.io/guide/architecture-services
"A component should present properties and methods for data binding to mediate between the view and the application logic."
I wished you taught other things like Spring Boot. Learning from you is a night and day difference from anyone else
That is so very kind of you to say. It made me smile. Thank you SO much!
This video was fantastic and helped me understand RxJS much better. However, I have one question: when should I use the reactive pattern versus the imperative pattern? Is the reactive pattern always the better choice?
Thank you!
Reactive vs imperative pattern is a personal (or team) choice. My preference is to go reactive as much as possible. And now with the new signal features, there are more ways to "go reactive"!
Thx again for you well explain video, :-), keep on making them, do you also have sample projects to be made from scratch ?
Thank you for watching. I just created a video that suggests that it be used as a sample (from scratch) project. You can find it here: th-cam.com/video/LHgJP7MwTWY/w-d-xo.html
One point mentioned, switchMap doesn’t cancel requests, this might lead to confusion, switchMap internally just unsubs from the observable provided to it: the inner observable. If that inner observable implemented cancelation logic on unsub only then will the request be cancelled, not knowing this this can have unexpected results when using switchMap on DELETE, PUT, PATCH requests as one might expect this to be cancelled. Managing side effects is what this ultimately is about.
I was talking about HTTP requests, but you are right, I wasn't clear that I was talking about *only* HTTP requests using Angular HTTPClient.
And yes, when using HTTPClient it does indeed cancel any inflight requests. See more info here: github.com/angular/angular/blob/main/packages/common/http/src/xhr.ts#L317
This should cancel any request (DELETE, PUT, PATCH) if it has not yet been processed. You are correct that if the backend already performed the delete, it is not going to "undo" it.
@@deborah_kurata the principle of the observable is that it has a predictable contract of next, completed, error the cancelation (even mentioned in documentation rxjs btw wrongly under switchMap) but it is a conceptual leap to what it can do for us but it’s these leaps that bring confusion when using switchMap differently as cancelation (or abort controlling) is just a different thing. Ultimately the side effect performed is solely affected if the right side, HTTP in this case adheres to working on one of the observable contract’s specifications. By treating observables as a primitive we can move the community to see it more as a new paradigm to code as apposed to a set of instructions to adhere to common scenarios.
Thank you Deborah.
Thank you for watching! 🙏
fantástica aula! muito obrigado!
Thank you for watching!
Great video Deborah! I find it very useful, although I am not the video learner kind of person. Is there a pdf that I can read offline possibly? Thanks a lot, Damian
Thank you!
One option you can try is to copy and save the transcript/subtitles. If you want to give it a try, there are instructions here: www.rev.com/blog/resources/how-to-download-youtube-subtitles-as-text-files
I loved the explanation and it helped me a lot to better understand MergeMap and ConcatMap.
But I really wanted to find a tutorial, article, book or code example using Rxjs and Declarative Approach in all CRUD but I just can't find it anywhere. If anyone could help me...
Thank you.
For full state management/CRUD I'd recommend using a tool such as NgRx.
If you'd like to see an example of CRUD with a reactive approach, I have one here: github.com/DeborahK/Angular-RxJS/tree/master/APM-WithExtras
See specifically product-edit.service.ts. It uses scan to cache the set of data and allow create/update/delete operations against it.
However, with the new signals features coming, this will change (and hopefully be a bit easier to work with).
I wish I have resource like this when I started learning this diabolical library X)
Hello, new sub here!
thx for your work, very clear and valueable! Looking forward for more video of yours! ☺️
Awesome! Thank you and welcome!
hi, your content both on TH-cam and your courses on PluralSight have been key in helping my move to a more reactive approach using RxJS. Im not going to pretend that I haven't found it tough though. Something I am struggling with at the moment is automatically refresh data based on current status. I have an observable containing an array of data that is being displayed. I have a requirement that if one of values of the records is "In Progress" we need to poll and keep refreshing the data every x seconds until we no longer have any that are "In Progress". Do you have an example or thoughts on how to achieve this?
So glad to hear the content was useful.
I'd like to do some sample code to answer your question. I've recently had a family emergency and will be out another week.
Hi @Deborah Kurata. If data returned is in the shape below-
export interface IPagedResponse {
data: T[];
result: boolean;
responeCode: number;
message: string;
}
And I want to display data part only. How can I use async pipe
*ngIf="products$ .dat | async as products
Parentheses help in this case.
Here is code from one of my projects:
For your example, it would be something like this:
*ngIf="(products$ | async)?.data as products"
@@deborah_kurata Thanks. I appreciate your help
Going to subscribe to your channel due to this video. Very clear and easy to understand.
Wonderful to hear. Thank you! 😊
How to adapt the declarative data access approach for http calls with parameters? for example, get a user with their ID? and should we change the userId to signal and then use computed to do the http call??
Use an RxJS Subject to emit the value to be used at the parameter.
I have an example here: stackblitz.com/~/edit/sync-select-subject-deborahk?file=src/todo.service.ts
@@deborah_kurata gotcha! In this case Subject is used instead of signal cuz we want to subscribe and react to it to do the http call? so can I say signal is more for data display instead of for data pulling. for data pulling, behaviorSubject or Subject is still better?
@@yunm1824 Signals are for managing state. They always have to have a value. A computed signal is for reacting to value changes, but computed doesn't support async operations.
Subject/BehaviorSubject is great for responding to actions when dealing with async operations (such as an http.get).
So to react to synchronous changes, use a computed signal where possible.
To react to asynchronous operations (such as http.get), Subject/BehaviorSubject work well. Or, if the action is caused by a user operation, you can use events. Here is an example that uses the user-driven event: stackblitz.com/~/edit/sync-select-procedural-deborahk?file=src/todo.service.ts
@@deborah_kurata Thank you so much for answering my question in details! You are such a great and patient teacher! Sincerely appreciate that~😘
Hello @DeborahKurata I have been working a lot with RxJS and I’m wondering which would be the best approach to dealing with multiple valueChange observables subscription with Angular Form or is better grouping all this subscription with one operator and then use the async pipe.Thanks for this excellent material like always.
Hey! Thank you for the kind words about the video.
Yeah, it's difficult to recommend an approach without more information about the specific scenario and code example.
If you'd like to build a little stackblitz with a small example of the options you are considering (not your entire app), I would be able to provide a bit more of an opinion. ☺
How would you declaratively have an http.get in the service if the url you are calling in the get needs params from the component?
Use a Subject/BehaviorSubject to provide the params.
private productSelectedSubject = new BehaviorSubject(0);
productSelected$ = this.productSelectedSubject.asObservable();
product$ = this.productSelected$
.pipe(
switchMap(id => {
const productUrl = this.productsUrl + '/' + id;
return this.http.get(productUrl)
.pipe(
catchError(err => this.handleError(err))
)
})
);
productSelected(selectedProductId: number): void {
this.productSelectedSubject.next(selectedProductId);
}
@@deborah_kurata thank you so much!
Deborah, sorry to bother you, do you have more information, articles, or places where I can find more patterns associated with writing declarative code with RxJS?
I have more videos in my RxJS playlist here on TH-cam: th-cam.com/play/PLErOmyzRKOCrtHaQk-qiq3YhhD_J7K9rA.html
The "4 Wicked Pipelines for RxJS in Angular" (th-cam.com/video/wQ8jXlWMoCo/w-d-xo.html) might be of interest.
I also have a new RxJS course on Pluralsight: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
Ive learned a lot from you! Thank you very much!
Glad to hear that! Thank you!
excellent! thenk you so much from italy
Thank you for watching! I was recently in Italy (Roma, Firenze and Peccioli). Very beautiful!
Great video. Had to laugh at seeing Quibi!
Thank you!
Who/what is "Quibi"?
@@deborah_kurata It's one of the streaming services in the Subscriptions sections. It was a (relatively) short lived streaming service built on the premise of short, "quick bites" (Quibi) of episodes. For example they did like 15 minute version of 60 Minutes. Before tech I worked in entertainment and it's a relatively notorious tech startup in TV/Film.
Amazing video, thank you!
Glad you liked it! Thank you!
What is the meaning of "flatten result" ?
There is a good answer here: stackoverflow.com/questions/6626454/flattening-a-collection-of-collections
Great patterns, thanks a lot.
Glad you like them! Thanks for watching!
I think the idea to say that “what we have”: is an action is not the best abstraction, what we have is a user taking an action and not a subject, which in itself could follow that rotation of what we have, what we want and when, since that observable follow that same idea. To clearly define the first step is really about determining or in this case rebasing the source stream, which in this case are clicks$ instead of a get$. First step is (re)basing the right source$
You are correct in that the "What do we have?", "What do we want?" and "When do we want it?" are a bit of an oversimplification. For many starting out with the complexities of RxJS, that simplification is helpful. For those with a deeper understanding of RxJS, it may be less helpful.
@@deborah_kurata I agree that the idea to bring that was is easier to digest is good. But also it’s the principle understanding that paves the foundation of this technology is what the community today misses. So for example the idea that a source is very much the starting of a stream and relaying that source stream to bring most purity by making longer pipes is what makes for a great approach, also easy to digest: as everyone understands that a constant stream of data is much more a system as sprinkling logic here and there which at some point might or might not have a small stream. Similar to how the Panama kanal proved an assets when it’s source was relayed (there are probably way more effective metaphors to be found) I just think that the idea of a action stream has that same loop, because what we have, want, when is already nested thus complicated the moment we for example debounce clicks$ or typings$
Good stuff.😊
Thanks!
insightful
Thanks!
Great video 🎉
Thank you 😁
wow nice . Could you please share the code ?
Thanks!
I basically took snippets of code from several of my projects/courses to demonstrate the concepts in this video. So I don't really have all of the code you see in one project. This one may be the closest: github.com/DeborahK/Angular-RxJS
Let me know if that's close to what you are looking for.
Thank you
Thank you
Thank you
You are very welcome. ☺
Thanks for watching!
great content
Thank you!
Great videos!!!
Thank you so much! 😊
you are amazing thx ☺
Thank you so much! :-)
i love your videos
Thank you so much!
🎉
😊
First example is actually problematic, because it returns an observable wrapped in a function whilst no arguments are expected, by doing this you take away the opportunity to multicast the observable effectively, as each calling gets an unique observable. Operators like shareReplay that effectively cache the response would become unusable in that sense. Funny that the angular documentation lists examples like this while it could bring confusion when you really want to compose observables in meaningful ways down the line.
Could you provide a time code or a bit more so I have context on what you're referring to as the "first example"? Are you referring to the first pattern? Or one of the examples as we cover the terms?
If you are referring to the first pattern: "Classic Pattern for Retrieving Data: Service", then no. It is returning an Observable, not an Observable wrapped in a function.
Could you elaborate?
@@deborah_kurata getproducts$ returns an observable wrapped in a function, in that way the problematic side is that observables just like functions are callable, observables are functions. Whereas wrapping an observable when not providing arguments is like wrapping a wrapping if that makes sense. Therefor it is strange that this is part of the angular documentation because it immediately educates the wrong principe, there is mostly no reason to wrap an observable except if wanting to provide specific arguments, but also for that it’s better to relay the stream to be one of actions$ as you also show later on.
Yay!
Second time watching this and I'm pretty sure there's gonna be a third, fourth time...
Yeah right… these stuff are so complicated and confusing
Sylvan Fall
Lee Gary Davis Kevin Gonzalez Mark
What a hopefully woman, great
Thanks!
Ceasar Mall
These are great examples, but I think you should feature or highlight the selectedCategoryChanged function below more, because it's easy to forget.
private categorySubject = new Subject();
categorySelectedAction$ = this.categorySubject.asObservable();
selectedCategoryChanged(categoryId: number): void {
this.categorySubject.next(categoryId);
}
I had to watch a few times and it clicked, but you can't do some of these patterns if the observable isn't emitting anything, and it's easy to forget exactly how it happens. In the code, selecting an item from the dropdown will pass that item's categoryId to the selectedCategoryChanged function which then emits the value using .next(), and with data being emitted then the patterns can take place!
Yep!
And some of these patterns are even easier now if you can use the new signals features!