The amount of angular stuff I've learned (by accident haha) by watching your intriguing videos Josh is crazy! I used Angular for about a year only before! Nice vid!
Josh, this is one of the best videos on Obesrvables and Angular I've watched in a long time (or maybe ever)! Real life example (not just setTimeout or a timer), very CLEAR explanation. THANK YOU a thousand times! I've subscribed to your channel and promise to go and like every single video on your channel.
I am thrilled by your videos Josh! I ran into them via playlist suggestion and I am so happy I did! The best, concise, comprehendible explanations by far!!! Thank you for sharing your knowledge and experience. It's been a huge help!
I watched so many videos on async pipe, and finally I am able to resolve the error of my code. No one explains the part where multiple arrays are coming from the backend and how to async a particular array. Thank you so much for this video sir. I'm new to async and was stuck in async part for 3 days straight.
Thanks Josh! I have been watching a lot of your videos recently, extremely valuable content. I wanted to ask if there was a repo we could access to view the source code of your vids. Thanks for everything!
Hi Josh. What impressive work you are doing! I would like to know whether you have a tutorial showing how to upload pictures (camera & library) in firebase storage using th new version of firebase SDK. thank you again for all
but...one important example is always missing in async.. How to subscribe data with async pipe from service witch requires parameters, like user id or similar?
like dependency injection? or you could create a stream to get the data then switch map to your service observable with that user id data. i.e of().pipe(#wait for emmision#, switchMap((user.id) => return service.observable(user.id))). or something like that.
Pretty neat thing I've found out recently when you need to organize multiple subscriptions in the template: Wrap your template code in an ng-container and an object like so *ngIf="{ observable1: observable1$ | async, observable2: observable2$ | async } as data" Now you can access it like this in the template (within the ng-container): data.observable1
Hi Joshua, I have been facing an issue that I have no explanation for. I have been trying to implement your approach to the async pipe where the parent calls the async pipe and injects the data into the child component. The issue I'm facing is that any lazy loaded pages don't trigger change detection and I'm stuck with the loading template until I either refresh the page or resize the browser window. I've tried every strategy with the angular change detection even as far as checking for changes manually. Let me explain a bit more about what's happening. I log in with firebase after login i get the current logged in user and switch map to fetch that user profile. I then use the user's data to retrieve the company that use user belongs to. when visiting lazy loaded pages after initial login in I'm stuck with the loading template as change detection does not happen.
What if I would like to display a message of “no client found” if the http request returns empty? How does the async pipe knows that is not loading but finished loading and returning empty values?
Does the expression "let client of client$ | async" get interpreted as "(let client of client$) | async" or "let client of (client$ | async)" ? In other words what is the precedence of the pipe?
This isn't really something I have thought about, but *ngFor only works with iterable objects like arrays, so "let client of client$" wouldn't work as an observable stream is not iterable, but (client$ | async) will pull the iterable value out of the stream to be looped over. So, "let client of (client$ | async)" I guess would be the right way to think of it.
Great video. You (like almost everyone about async) did skip the ugly parts though - error handling! Doing that in a fully reactive way does gut ugly to the point where you start questioning your usage of async altogether :(
I have a separate video on handling errors reactively with the async pipe (in a non-ugly way, at least I think so): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kb9CBd2c4uA.html
Changing the data is fine, it's when you need to access data from the stream inside if your components class that you might have to subscribe manually.
@@JoshuaMorony thanks for the info. If you were populating a reactive form with values obtained from an http get request then I guess you would have to use subscription because you can’t use async in the template
@@CodingAbroad Yes that's a good example of where you might have to subscribe. Although, you could also structure it to still use the async pipe, it would just be a bit more complex. If you had your form inside of a child component, you could use the async pipe in your parent component template, and then pass the form values in to the child component. Then your child component can just react to changes in input, and you never have to manually subscribe to the observable.
Is there a particular scenario you want to see covered? With a reactive approach there isn't really any issue with errors, you would generally just have another stream for your error state. So for this example we could extend it by adding an additional element inside of the loading container that uses the async pipe to subscribe to the error stream. Now the loading container will display when client$ hasn't emitted (we could use pipe to catch errors from the client$ stream and cause the error stream to emit), and the reason for that will either be because there was an error or just because it hasn't finished loading yet.
I like the way you explain! I have a question, for example if in the returns of some endpoint has another url to request another get nested with more detailed information, how can I handle with | async? Or should I handle with manual observable? For example: (get) /heroes/1: name: "Batman", url: "..../batman/1" (get) /batman/1: img: "..../1.jpg, height: 6 feet, 2 inches tall etc...
You can do all of this with a single stream and subscribe with the async pipe - You would create a stream for the first request, and then use the pipe method to add on one of the higher order observable operators (e.g. switchMap, concatMap, mergeMap, exhaustMap) - these all do slightly different things based on the exact behaviour you want. But in this case, you probably want to use switchMap to take the batman value from the first stream, and then switchMap to a second http stream using the batman value in the request.
