How to use the ASYNC PIPE effectively in Angular Templates

[@AlanMontgomery]

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!

[@JoshuaMorony]

Haha thanks! Careful man, or you'll be joining the red side before you know it

[@leonardopillay4200]

Where have you been all my life? I love how detailed you are with your explanations.

[@yekaterinacrawford2037]

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.

[@manassrivastava6452]

Best Angular Tutorials out there on KZbin

[@markvanmameren]

One of the best Angular KZbin channels out there 👏🏻

[@janeywebdev2370]

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!

[@jamienordmeyer4345]

I wasn't aware of the `;else loading` functionality. Learned something new yet again. Thanks Josh!!!

[@ChristopherRobertHarris]

Thanks, Josh. I’ve used async pipe as in your first example but never realised you could do all the other stuff. Very informative video, cheers.

[@samclavette420]

So happy to see this syntax for subscribing to an observable that returns an object!

[@Rani.Dutta.]

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.

[@scottc7909]

I can't believe I didn't watch this video a year ago, it could have saved me a bunch of headaches

[@diehypotenuse4908]

holy moly, that was clean.

[@gusgonnet]

great tips Josh, thank you!

[@rgablejr]

Thank you! Great content!

[@miyasmohammed4342]

wow, nice its a very much informative video for angular or ionic developers.

[@sunantjong8463]

Great tips Josh :) very useful tips

[@jaybee6382]

ngrxLet* is also a less verbose way of doing this. Great video.

[@md.habiburrahman7834]

Thanks Joshua.

[@nagendradevara1]

Thank you , will try to incorporate it.

[@penumono]

Hi Josh. Could you make a video of using async pipe for crud operations in a table in angular?

[@trustingod0]

Great Information. I was just wondering what do you mean when you said await a result? Thanks !!!

[@tomcatbuzz]

Great video. Would the concept be the same for the *ngFor="let client of clients | async"? For showing a loader when the clients list is loading.

[@TravisSomaroo]

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!

[@JoshuaMorony]

Hey Travis - check the description on the vids, any videos where I have the source code available will have a link in the description

[@flesa969]

@Joshua Morony What if you have multiple obersables? How to combine them to one?

[@samnickliboum9857]

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

[@michelletao5872]

For the second example, why did you use a div tag instead of ng-container?

[@pekahon]

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?

[@JacinLowe]

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.

[@alex25197]

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?

[@MichaelSalo]

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?

[@JoshuaMorony]

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.

[@MichaelSalo]

@@JoshuaMorony Thanks for this clarification

[@juanpabotero]

Hi! Can I use the Async pipe with the method trackBy using *ngFor, ex: *mgFor="let client of clients$ | async; trackBy: trackByFn"

[@Eltopshottah]

Thank you!

[@leonardopillay4200]

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.

[@lcho9871]

Excellant and thanks.

[@CodingAbroad]

So it’s mostly good to use providing you don’t need to change the data? In which case you’d stick with subscription

[@JoshuaMorony]

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.

[@CodingAbroad]

@@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

[@JoshuaMorony]

​@@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.

[@kush.mikashita]

Hummm... this is good. Thanks

[@ksivasuriyaprakash9976]

Nice!

[@Matrium0]

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 :(

[@JoshuaMorony]

I have a separate video on handling errors reactively with the async pipe (in a non-ugly way, at least I think so): kzbin.info/www/bejne/oZOcdHWaZ8hnq6M

[@Matrium0]

@@JoshuaMorony Oh, nice, awesome!

[@joelv6886]

Heres how cool async pipes are. Lets not show them error handling or updating the stream because... It's ugly.

[@JoshuaMorony]

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.

[@michaelharrington5860]

This is the problem with tutorials. People show half the information and expect viewers to know the other half already. Show the rest of the code

[@tailofahippopotamus9775]

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

[@sergiohidekiono771]

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

[@JoshuaMorony]

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.