Async Pipe Is Broken in Angular

Learn why async pipe is broken and how to fix this problem. In last versions of Angular default value of async pipe is null which was previously not like this and I want to share the best approach to solve this async pipe issue.
► CHECK MY COURSES - monsterlessons...
FOLLOW ME
► TWITTER - / monster_lessons
STUFF I USE
► My imac for home on Amazon - amzn.to/3MgtZAC
► Mac macbook to go on Amazon - amzn.to/3yr3UJg
► My monitors on Amazon - amzn.to/3yw6lKD
► My mouse on Amazon - amzn.to/3CEFCNt
► My keyboard on Amazon - amzn.to/3fOzNVL
► My monitor arm on Amazon - amzn.to/3CHr5BA
► My speakers on Amazon - amzn.to/3T4uf7W
► My coffee machine on Amazon - amzn.to/3rI9DGQ
► My Synology NAS on Amazon - amzn.to/3MjIpQz
► My Seagate IronWolf 4TB HDD on Amazon - amzn.to/3Cndm1B
► My external SSD drive on Amazon - amzn.to/3rFPQb1
► My external HDD drive on Amazon - amzn.to/3MmrsVE
► My microphone - amzn.to/3SMCE08
► Audio interface - amzn.to/3ecWv9O
► Camera - amzn.to/3RNOLIM
Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you. As an Amazon Associate I earn a small commission from qualifying purchases.

[@MonsterlessonsAcademy]

WATCH NEXT: Angular Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/a3LCin6ii7yAhtEsi=2DCn7yspEAAJ2H6l

[@marcopolocs]

I used the " | async as " syntax before within ng-container but it seems I didn't fully understand why I should do this. The way you used combineLatest was new to me because I never thought about the possibility of putting all my data into one single stream and at the same time keeping them separated at the same time. Big thanks for the new information, I really appreciate your videos!

[@MonsterlessonsAcademy]

You are welcome!

[@user-mq9cx1eu9p]

This was the exact problem I'm working on currently. Excellent timing! Thanks for your content!

[@manojm3257]

can i. help you

[@MonsterlessonsAcademy]

Glad to help!

[@luczztem]

you are an angel to those learning Angular....

[@MonsterlessonsAcademy]

Thank you!

[@advance5189]

Great video. Though for some reason a lot of people omit the main problem of using async with *ngIf and @if conditional blocks. What if our data is falsy, e.g. 0? The component won’t never be rendered, which in some cases might turn out to be something we don’t really want. Moreover, async pipe marks everything for check. Would be great if you made a video about *rxLet and *ngrxLet that help to solve those problems

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@omarmarzougui2901]

I prefer this one because no subscribe = no unsubscribe What do you think about this approach?

[@MonsterlessonsAcademy]

Thats a good way. You can even move it to component data$ = combineLatest({a: a$, b: b$})

[@pnetesa]

Thanks for video Oleksandr. I had this error when provided data for child grid component. Resolved it with nullish coalescing operator [currentPage]="(currentPage$ | async) ?? 0" Of course this works if you can provide a default value for child component.

[@MonsterlessonsAcademy]

This is one of the ways

[@adrian_cg]

The one issue I see here is that you wont get any data until all of your observables have emitted at least once, so if one of them is a slow api request you won't see data for a while.

[@MonsterlessonsAcademy]

It should never be a direct api call as they can fail but a behaivour subject with a default value

[@cinnamonrage]

I believe now ngrx gives you the ngrxLet that handles much of this through the LetModule. Or I believe it also gives you the ngrxPush pipe through the PushModule which can still give you the undefined but removes the null, at least. Also, to add, the ngrxLet also does error handling, if you want it.

[@MonsterlessonsAcademy]

You are totally right but not all people use ngrx with angular. Plus I don't like the idea to rely on library to fix default angular behaviour

[@cinnamonrage]

@@MonsterlessonsAcademy Yeah, I totally agree with that. I am already using ngrx so it’s a “freebie” but without that, you end up extra dependencies. Thanks though, this video was really useful.

[@sickerthanyouraverage701]

You didn't mention the biggest flaw with async pipe: error handling. Handling errors when you are using async pipe is terribly complicated.

[@MonsterlessonsAcademy]

Actually a lot of people mention this but I think it was never intended to implement error handling. Just don't write pipes for the streams that can get errors. Typical example is 3 streams per page with data, error, isLoading. None of them can fail and none of them do API calls/etc.

[@brampeirsful]

Will this not cause the full component to re-render? Since the data stream is recreated on every change? Or is angular smart enough?

[@MonsterlessonsAcademy]

Stream is created only on component initialize. Angular is not doing anything except of unwrapping data in this case.

[@lianayukhymchak5328]

Excellent explanation!)

[@MonsterlessonsAcademy]

Glad you liked it!

[@TheoLeChnow]

sooooo... even Google teams use nested if... sigh... 😴 great video however :) just, if I am not wrong combineLastest is deprecated and rxjs team recommended to use combineLatestWith instead

[@MonsterlessonsAcademy]

It's not deprecated they are working in a different way. combineLatestWith is much more rare to use. combineLastest - When any observable emits a value, emit the last emitted value from each. combineLatestWith - Create an observable that combines the latest values from all passed observables and the source into arrays and emits them.

[@TheoLeChnow]

idk... on rxjs official doc (rxjs dev) it's tagged deprecated and will be removed in v8

[@MonsterlessonsAcademy]

@@TheoLeChnow ibb.co/d46rLZ6

[@TheoLeChnow]

@@MonsterlessonsAcademy ok I get it, only the operator is deprecated

[@leakyabstraction]

I think CombineLatest, especially used with ngif, is super problematic for people new to rxjs... Because in most cases they don't want to make the ENTIRE template content conditioned on whether ALL of the underlying observables have emitted.

[@MonsterlessonsAcademy]

Yes person should understand how it works :). combineLatest resolves to the object with initial properties. It will be resolved only after every property has at least one value. So if all your streams have a default value which I recommend doing, you won't have a problem.

[@hacsor22]

What about if my observable returns a boolean, I need to use the value from the observable in multiple lines, and I have a button and I don't want to use ngIf because it would display/hide my button? Should I subscribe from the controller?

[@MonsterlessonsAcademy]

Then the only way is to have undefined as a default

[@yuliyy__]

What about the other approach where you create an object within ngIf? i.e. *ngIf="{foo: foo$|async, bar: bar$|async} as data"

[@MonsterlessonsAcademy]

It's the same as a combineLatest *ngIf="data$ as data". It's fine. But in comps you typically provide specific properties and not a single big object.

[@rokometek7394]

We can just pass object in combine latest. Then we don't need map array of observable to object combineLatest({ currentPage: currentPage$, foo: foo$, bar: bar$ });

[@MonsterlessonsAcademy]

I used it before but I thought as some point that it is deprecated. Thank you!

[@gnanaselvan2010]

BAM! you're the man!

[@MonsterlessonsAcademy]

Thank you!

[@eduardodemoraes2371]

I love you

[@MonsterlessonsAcademy]

Thanks :)

[@alexmatveev7730]

can I use this approach with ngrx selectors? I mean combinelatest[selector1$,selector2$....]) where selectorN$ = this.store.select(somevar) ?

[@MonsterlessonsAcademy]

Yeap sure