Тёмный

How to use the ASYNC PIPE effectively in Angular Templates 

Joshua Morony
Подписаться 78 тыс.
Просмотров 38 тыс.
50% 1

Опубликовано:

 

29 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@AlanMontgomery
@AlanMontgomery 3 года назад
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
@JoshuaMorony 3 года назад
Haha thanks! Careful man, or you'll be joining the red side before you know it
@leonardopillay4200
@leonardopillay4200 2 года назад
Where have you been all my life? I love how detailed you are with your explanations.
@manassrivastava6452
@manassrivastava6452 11 месяцев назад
Best Angular Tutorials out there on RU-vid
@yekaterinacrawford2037
@yekaterinacrawford2037 2 года назад
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.
@markvanmameren
@markvanmameren Год назад
One of the best Angular RU-vid channels out there 👏🏻
@jamienordmeyer4345
@jamienordmeyer4345 2 года назад
I wasn't aware of the `;else loading` functionality. Learned something new yet again. Thanks Josh!!!
@janeywebdev2370
@janeywebdev2370 11 месяцев назад
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!
@Rani.Dutta.
@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.
@ChristopherRobertHarris
@ChristopherRobertHarris 3 года назад
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
@samclavette420 2 года назад
So happy to see this syntax for subscribing to an observable that returns an object!
@jaybee6382
@jaybee6382 Год назад
ngrxLet* is also a less verbose way of doing this. Great video.
@Alex-bc3xe
@Alex-bc3xe Год назад
God bless you I really needed a lot of informations for some projects.
@diehypotenuse4908
@diehypotenuse4908 2 года назад
holy moly, that was clean.
@md.habiburrahman7834
@md.habiburrahman7834 Год назад
Thanks Joshua.
@scottc7909
@scottc7909 Год назад
I can't believe I didn't watch this video a year ago, it could have saved me a bunch of headaches
@rgablejr
@rgablejr Год назад
Thank you! Great content!
@miyasmohammed4342
@miyasmohammed4342 3 года назад
wow, nice its a very much informative video for angular or ionic developers.
@penumono
@penumono Год назад
Hi Josh. Could you make a video of using async pipe for crud operations in a table in angular?
@nagendradevara1
@nagendradevara1 3 года назад
Thank you , will try to incorporate it.
@gusgonnet
@gusgonnet 3 года назад
great tips Josh, thank you!
@trustingod0
@trustingod0 2 года назад
Great Information. I was just wondering what do you mean when you said await a result? Thanks !!!
@sunantjong8463
@sunantjong8463 3 года назад
Great tips Josh :) very useful tips
@tomcatbuzz
@tomcatbuzz 3 года назад
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
@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
@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
@flesa969 2 года назад
@Joshua Morony What if you have multiple obersables? How to combine them to one?
@michelletao5872
@michelletao5872 Год назад
For the second example, why did you use a div tag instead of ng-container?
@Eltopshottah
@Eltopshottah 2 года назад
Thank you!
@samnickliboum9857
@samnickliboum9857 3 года назад
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
@juanpabotero
@juanpabotero Год назад
Hi! Can I use the Async pipe with the method trackBy using *ngFor, ex: *mgFor="let client of clients$ | async; trackBy: trackByFn"
@lcho9871
@lcho9871 2 года назад
Excellant and thanks.
@pekahon
@pekahon 2 года назад
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
@JacinLowe 2 года назад
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.
@tailofahippopotamus9775
@tailofahippopotamus9775 2 года назад
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
@leonardopillay4200
@leonardopillay4200 2 года назад
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.
@alex25197
@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?
@kush.mikashita
@kush.mikashita 3 года назад
Hummm... this is good. Thanks
@MichaelSalo
@MichaelSalo 2 года назад
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
@JoshuaMorony 2 года назад
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
@MichaelSalo 2 года назад
@@JoshuaMorony Thanks for this clarification
@ksivasuriyaprakash9976
@ksivasuriyaprakash9976 3 года назад
Nice!
@Matrium0
@Matrium0 2 года назад
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
@JoshuaMorony 2 года назад
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
@Matrium0
@Matrium0 2 года назад
@@JoshuaMorony Oh, nice, awesome!
@CodingAbroad
@CodingAbroad 2 года назад
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
@JoshuaMorony 2 года назад
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
@CodingAbroad 2 года назад
@@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
@JoshuaMorony 2 года назад
​@@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.
@joelv6886
@joelv6886 2 года назад
Heres how cool async pipes are. Lets not show them error handling or updating the stream because... It's ugly.
@JoshuaMorony
@JoshuaMorony 2 года назад
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
@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
@sergiohidekiono771
@sergiohidekiono771 2 года назад
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
@JoshuaMorony 2 года назад
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.
Далее
The easier way to code Angular apps
9:54
Просмотров 68 тыс.
Why you *should* use NgRx if you're learning Angular
9:56
Why use OnPush in Angular? Not for performance...
13:16
Git bisect is insanely good (and so easy)
4:00
Просмотров 84 тыс.
ngTemplateOutlet is WAY more useful than I realised
16:36