Why I use a view model stream for my Angular templates

Creating a single vm$ stream can be a convenient way to access all the data you need for your template, all with a single subscription using the async pipe.

0:00 Introduction
1:12 How combineLatest works
4:54 Dealing with non-synchronous streams
8:13 Dealing with errors
14:26 Conclusion

#angular #rxjs

[dsldsl]

you can use combineLatest({a: obsa$, b: obsb$, c: obsc$}) instead of([obsa$, obsb$, obsc$]) and skip .pipe(map((a, b, c)=>({a, b, c})) to get the same result with cleaner code

[xocomil]

What a fantastic overview of RxJs. You taught so many beginner-friendly concepts with great examples. This video is on my list of things to share with new Angular devs.

[guzmanoj]

I've been doing this for a long time now with no complaints! ❤

[Szergej]

Very good overview, your videos have been really helpful lately. We use this pattern in my job, so if a new junior dev were to start, I could just share this to get them up to speed ^^

For trivial usages like this, wehre you have 3 streams, and you pipe-map them to themselves, you can also create the object inside the combineLatest operator. Instead of passing in an array of sources, you can do
combineLatest( { source1name: this.source1$, source2name: this.source2$ } )
It does exactly the same thing, just a bit less verbose to type out.
Furthermore, if in your pipe you do need to use the streams ot do some data manipulation, you can access those streams by key, instead of by an array index, without the map operator.

[cedi]

I absolutely love your channel bro.
Just started working as dev fulltime, grooving into Angular and RxJs with your vidoes.
Big shoutout! ❤✌

[NerdENerd]

I prefer the patten <ng-container *ngIf="{ greeting: (greeting$ | async), count: (count$ | async), user: (user$ | async) } as vm"> because it is an object it is always true and because the properties are using the async pipe they are null before emitting. Much cleaner in my opinion.

[billy]

really liked this approach. I had on of the observables emitting another observable so i usetd startWith(of(<Interface>{}))
Thanks

[BarrettGamingHD]

Awesome. I never knew about ignoreElements, I needed to know something like this existed for work!

[subashbarik]

Your videos are always helpful for a beginner like me in Angular.

[jaybee]

The *ngrxLet directive is a lifesaver.

[LucidFabrics]

I, at this verry moment, will be refactoring a page that receives a separate set of streams from multiple api calls into one stream and then display the a skeleton-text using only one condition. That will be fun. thanks for sharing!

[CaseAhr]

So simple, but so valuable. You help me so much with wrapping my head around this stuff. Thank you for keeping you examples relatively simple.

[AlainBoudard]

Another great video Josh !
I find the straight declaration > instanciation very nice, because sometimes TS compiler gives us hard time declaring the proper type when using Observables with all the possible undefined outputs.

[shivisuper]

This is quality content! Glad i found this channel

[MarcoPinheiro]

Really nice topic, thank you very much Joshua!

[dawidos]

Great content, especially in these days when almost everyone claims that angular is dead etc. Keep up the good work! 💪

[mahmoudlawendy]

Thanks for explaining it really well! I've been putting off learning soft soft cuz it looks so intimidating but now that I easily understood the

[muzammiliqbal]

Nice thing but the issue I believe with this approach would be if we use shareReplay for multiple subscriptions then firstly, we will have to trigger subscription again if we want to update data of template after let's say deleting some record. Secondly, we will have to call checkError again. There are solutions to this like a refresh subject in order to forcefully get data again but in the end there will be too many observeables for a basic thing.

[praveensripati]

learned new things, Very informative.
@Joshua Morony Can you make videos regarding forms and how to handle them in an efficient way, it would be really helpful, Thanks✌.

[behindthescenex]

Hi Joshua! Thankyou for sharing this video. If i may ask, can you sometime covering how to unit test with this kind reactive pattern? Thankyou so much before 🙏