Wow, thanks!

Great to hear! Glad it was helpful! All of the best on your continued enlightenment! 😀

😊 Cheers to you! Thank you for posting!

Love those marbles! 😊

Great to hear! Thank you!

Wow, thank you! 😊

Thank you! 😊

So glad to hear it was helpful! Thanks!

Thank you so very much! 😊

Thank you for watching!

That brought a smile to my face this morning. Thank you! If you are interested, here are some playlists: Angular topics (new features/patterns): kzfaq.info/sun/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV Angular signals: kzfaq.info/sun/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB Signals + RxJS: kzfaq.info/sun/PLErOmyzRKOCrZ7aDGw4WYCtlQUVyKLRyq All the best!

Thank you so much!

Wow, thank you! Glad it was helpful!

So glad to hear it was helpful! Thank you. 😊

Glad it was helpful! Thanks!

I appreciate that! Thank you!

That is great to hear! Thank you so much! All the best!

Glad you enjoy it! Thanks for watching!

Your comments are so kind. It's great to hear that these videos are useful. Thank you!

So very glad to hear it was helpful. Thank you!

Wow! Thank you so much! 😊

That is so very kind of you to say. It made me smile. Thank you SO much!

It's wonderful to know that the videos are helpful. Thank you!

Thank you so much!

That is kind of you to say. Thank you!

Glad it was helpful! Thank you!

Thank you! 🙏🏼

Great to hear! Glad I could help. All the best on your learning journey.

So glad it was helpful!

Great job! So great to hear that! Thank you!

Glad you liked it!! Thanks for watching!

Wow, thank you! That is so kind of you to say.

Glad it was helpful! Thank you for watching!

Thank you! Glad it was clear!

That is wonderful to hear! Thank you so much!

Wonderful to hear. Thank you! 😊

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 for the kind feedback! Glad to hear it was helpful!

Thank you for watching! I was recently in Italy (Roma, Firenze and Peccioli). Very beautiful!

Glad it was useful! Thanks!

+1

@@yanis68 Try this: app.pluralsight.com/library/courses/rxjs-angular-reactive-development

Thank you for watching!

Glad to hear that! Thank you!

Good to see you too. Thanks for watching the video. Glad to hear that my Pluralsight course was helpful. Thank you! All the best.

Glad it was helpful! Thank you for watching!

Thank you for the kind words! 😊 So great to hear that the tutorials were helpful!

Glad it was helpful!

Glad you liked it! Thank you!

That is great to hear. Glad it was helpful. Thank you!

Great to hear! Thank you!

Glad you like them! Thanks for watching!

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.

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.

Nice! Thank you! 🙏

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.

Thanks!

Awesome! Thank you and welcome!

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 KZfaq: Git/GitHub, Intro to Programming, HTML, CSS, Bootstrap, and JavaScript. I also have several Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata

Great suggestion! I'll add it to the list!

Thanks!

Thank you!

Thank you so much! :-)

Thank you so much!

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"!

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$

You are very welcome. ☺ Thanks for watching!

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).

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.

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!

Thank you for watching! 🙏

You are correct. Thank you. Bummer that there isn't a way to edit the content of a YT video. :-)

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

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.

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

I have more videos in my RxJS playlist here on KZfaq: kzfaq.info/sun/PLErOmyzRKOCrtHaQk-qiq3YhhD_J7K9rA The "4 Wicked Pipelines for RxJS in Angular" (kzfaq.info/get/bejne/rbdonbudvLPTc6M.html) might be of interest. I also have a new RxJS course on Pluralsight: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals

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!

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."

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~😘

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. ☺

There is a good answer here: stackoverflow.com/questions/6626454/flattening-a-collection-of-collections

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.

Yeah right… these stuff are so complicated and confusing

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.

Thanks!