Learn RxJS Angular, RxJS pipe, async pipe, RxJS observables, Behaviorsubject, Combinelatest

[@MonsterlessonsAcademy]

WATCH NEXT: Beginner's RxJS Tutorial: Dive Deep with RxJS Crash Course - kzbin.info/www/bejne/r3vHmWSVe8enoLcsi=qhsqP7Eu3Nd7_hIU

[@prateekvishwas4151]

Most underrated channel, this channel deserve more views and more subscribers

[@MonsterlessonsAcademy]

I appreciate that!

[@felixmatusinio6438]

Straight to the point. In just 20 minutes of video I felt like, I’ve gain superpower.

[@MonsterlessonsAcademy]

Awesome!

[@Bregylais]

You are hands down the best RxJS / Ngrx / Angular teacher out there. Well done, good Sir, well done.

[@MonsterlessonsAcademy]

Wow, thanks!

[@kiranshinde03]

I have never seen this much of clear understanding of observables, and that tricky (now easy) behaviorSubject.. Many many thank you for this ❤❤

[@MonsterlessonsAcademy]

Glad it was helpful!

[@legends_assemble4938]

Before this video I had no knowledge of RxJS. any or most of the articles or videos out in the internet start to explain about some technical stuff like observables, observers, pipes, subscribe, etc, etc.... All this jargon with complicated examples which had made me nervous quite few times.. Man but you rocked it. I did not need to know all that technical stuff while just knowing how it worked, and you gave me that... Thanks a lot.

[@MonsterlessonsAcademy]

Glad to hear that!

[@ltd_music]

That is the clearest and simplest approach i've watched so far. Thanks for the video! Amazing work!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@MrSuija]

Amazing channel with clear, practical instructions. Thanks and keep up the good work!

[@MonsterlessonsAcademy]

Thanks, will do!

[@Popinho7]

this tutorial feels like you are unlocking a new level in Angular, amazing!

[@MonsterlessonsAcademy]

Glad you think so!

[@VadymZavadiuk]

Just what I wanted to know! Your fast and clear explanation is really important for everyday use. Thank you!

[@MonsterlessonsAcademy]

Glad you like it!

[@ashwanikumar183]

your content has a lot more super power I've been working for angular more than 2 years now. Once I see that I just got surprised the superpowers you teach here can you please create a detailed video on rxjs making any project along the way.

[@MonsterlessonsAcademy]

Wow, thanks!

[@advance5189]

Wonderful tutorial! I’m really fascinated by the way you explain different things. Way to go!

[@MonsterlessonsAcademy]

Thank you so much!

[@FullMetalAlgorithmist]

Super good stuff man. Love your content. I'm relatively new to angular, and your videos are helping me a lot. Thanks!

[@MonsterlessonsAcademy]

Great to hear!

[@andromadusnaruto1544]

Wow! I learnt a whole LOT out of this video. Thank you soo much, Mr. Olleksandr.

[@MonsterlessonsAcademy]

Glad to hear that!

[@ezvalt1323]

I have finally understood why we use combineLatest. Thanks a lot

[@MonsterlessonsAcademy]

Happy to help

[@RealNaisuCinema]

This video was so good. The code is so perfect it’s like art. I’ll be watching this a few more times I wish I could commit this to memory. Maybe I’ll try

[@MonsterlessonsAcademy]

Glad you like it!

[@monjurmorshed2854]

Your angular explanation style is great and very clear!!!!

[@MonsterlessonsAcademy]

Glad you think so!

[@RidingSoulRV]

Damn !!! so much to learn in just 19 mins... Thank you

[@MonsterlessonsAcademy]

You are welcome!

[@dorji-dev]

Coming from react to angular, your channel is a blessing.

[@MonsterlessonsAcademy]

Wow, thank you!

[@jacekmaolepszy5342]

Love this guy, his accent, and knowledge. Thx!

[@MonsterlessonsAcademy]

Thanks for watching!

[@figloalds]

This is a very comprehensive introduction with just the strictly necessary fundamentals, a great educational video

[@MonsterlessonsAcademy]

Glad to hear that!

[@user-rp9iis1en6h]

You convered so many things. In practical scenario, most of the times we need to access the observable not from the html, but from the typescript itself, and from the typescript, when you have 10 observable that should be utilized to produce your desired value step by step/ conditionally, using subscribe or pipe is insane. There is no shortcut of async pipe in typescript, thats the problem, my dear.

[@MrOpolo91]

Very clear explanation of important RxJs concepts... Amazing work! Keep it going :)

[@MonsterlessonsAcademy]

Glad to hear that!

[@emancipate71]

Thanks!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@VinodSharma-qg5nz]

great content in just 19 mins.Thanks!

[@MonsterlessonsAcademy]

You're welcome!

[@upsidedown8108]

Great video, as always. A video on how to test observables marbles testing etc would be awesome. Thanks.

[@MonsterlessonsAcademy]

Great suggestion!

[@valikonen]

I press like button before to see your contact. You always offer excellent content.

[@MonsterlessonsAcademy]

I appreciate that!

[@SehindeRaji-Imam]

I am really impressed, this is an excellent video !

[@MonsterlessonsAcademy]

Glad you liked it!

[@newybocktor]

Thank you so much, your explanation is realy clear and simple, your knowleage is respectful. Thank you for sharing your experience.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@olipardoable]

That was a great video thank you. At work we are dealing with a screen with multiple events and Rxjs made it simpler

[@MonsterlessonsAcademy]

Awesome!

[@trappu]

Bro, u've just blown my mind, thanks, like really, thank you a lot!

[@MonsterlessonsAcademy]

Glad I could help!

[@jaywantnarwade5517]

most of RxJs opertator completed in 20 min. Nicely explain all with example

[@MonsterlessonsAcademy]

Thanks!

[@tobalhenriquez8233]

You are the best explaining!

[@MonsterlessonsAcademy]

Thank you!

[@CharlieKiloSierra8893]

I really like the concept of combineLatest this is really helpful if you have a lot of stream data .. Great video this is awesome thank you

[@MonsterlessonsAcademy]

Great to hear!

[@troymelok831]

Nice and clear explanation, thanx man

[@MonsterlessonsAcademy]

You're welcome!

[@pankajshinde9269]

Simple, straight and clear...

[@MonsterlessonsAcademy]

Thank you!

[@michaelnagatoshi1830]

Dude! This video is fantastic!!

[@MonsterlessonsAcademy]

Glad you liked it!

[@sourabhpandit6724]

good explanation of basics RXJS

[@MonsterlessonsAcademy]

Glad you liked it!

[@tinodueppotell4869]

Danke!

[@MonsterlessonsAcademy]

Thank you so much for your support! It means a lot to me.

[@tinodueppotell4869]

@@MonsterlessonsAcademy I have to thank you for your great work here and of course also on Udemy. 👍

[@ijustravel]

Many thanks for the amazing session.

[@MonsterlessonsAcademy]

Glad you like it!

[@udhayasankar113]

Much needed tutorial.Thanks!!

[@MonsterlessonsAcademy]

Glad it helped!

[@udhayasankar113]

@@MonsterlessonsAcademy can you pls do a tutorial on how to unit test angular application

[@snivels]

Your videos are incredible. You're an excellent teacher!

[@MonsterlessonsAcademy]

Glad you think so!

[@michelchaghoury9629]

please keep going we need more and more angulqr content

[@MonsterlessonsAcademy]

Will do!

[@yejipark751]

Amazing video, thank you!

[@MonsterlessonsAcademy]

You are welcome!

[@emekaokerue2337]

Thank you so much! Very detailed explanation.

[@MonsterlessonsAcademy]

You're very welcome!

[@Samir-50082]

Hi very good explanation, I learned a lot thank you.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@Samir-50082]

Do you have a videocourse for angular

[@MonsterlessonsAcademy]

@@Samir-50082 I have Angular interview questions monsterlessons-academy.com/courses/angular-interview-questions-coding-interview-2023 and Angular NgRx course monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch

[@bunyaminyilmaz3798]

Absolutely insane, thank you. Coming from Vue i have problems to understand the reactivity in Angular.

[@MonsterlessonsAcademy]

Great to hear!

[@SpaceL0rd]

NIce video! but I have one remark: Use mergeMap() before filter() in the pipe and you will apply the filter for each indvidual value, so if a user isActive = false. you will still get the ones that are active. Using mergeMap() will flatten the array and the filter will be applied for each value of the array instead filtering on whole array --> So the filter work as in javascript.

[@MonsterlessonsAcademy]

Great suggestion!

[@user-cc8kb]

Great explanations! Thanks

[@MonsterlessonsAcademy]

You're welcome!

[@DragosP-cx7sk]

Thank you for this video!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@darioenriqueyero561]

Muchas gracias. Explicas muy bien. Bravo

[@raymondagholor2745]

Excellent content. Thanks for this!

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@kamillo27]

good stuff, thank you man! :)

[@MonsterlessonsAcademy]

Glad to help!

[@karthikeyan878]

Very useful tutorial !! Thank you

[@MonsterlessonsAcademy]

You are welcome!

[@sivasankaran99]

thanks you so much dude, i love it

[@MonsterlessonsAcademy]

You're welcome!

[@PresentedByBailey]

it was a really good video but it would have been great if the filter example was more realistic. most people would not want to return data only if all users were active, they would want to return the users that are active. i guess that filter function only filters for all or nothing, i take it? if you wanted to filter out just some items you would not use filter function there, is that correct? i have a Observable that is returned by a service and i want to filter out one of the Map items (one key,value pair) but i don't think this filter function will help with that. any suggestions on a video of yours to watch to be able to figure out how to do what i want?

[@MonsterlessonsAcademy]

Filter in RxJS doesn't equal filter in JS. It filters a stream not it's data. If you want js filter (or any other function) you want RxJS map with js logic inside.

[@ahmedmk534]

@@MonsterlessonsAcademy can you please provide any use case of using rxjs filters ? it is only used to get the whole stream or not depending on specified conditions ?

[@abhisheksaxena518]

Great video! One question, let's say I am getting the list of data from an API. How can I display the error message which is sent from the backend on the screen if I don't subscribe and get the error object from the subscribe method?

[@MonsterlessonsAcademy]

I talked about it here kzbin.info/www/bejne/ine7oaKXl9x1nLc

[@vibesoflife6596]

Excellent content please upload more such stuffs. Love from BHARAT

[@MonsterlessonsAcademy]

Thank you. Will do!

[@balamani149]

Thanks man great job :) ❤

[@MonsterlessonsAcademy]

No problem 😊

[@cupatelj52]

Very useful, thanks.

[@MonsterlessonsAcademy]

Glad it was helpful!

[@sergeyshabaganov1620]

Cool!! Many thanks for your work!!

[@MonsterlessonsAcademy]

Glad you like it!

[@tuber694]

Excellent content!

[@MonsterlessonsAcademy]

Glad you think so!

[@emilsirbu236]

Thank you for this awesome content!

[@MonsterlessonsAcademy]

Thanks for watching!

[@KaranOdedra]

Wow, thanks a lot. Subscribed :)

[@MonsterlessonsAcademy]

Thanks for the sub!

[@shadowgazesup]

Thanks for the video. Please make a video for Cold and Hot Observables or NgRx

[@MonsterlessonsAcademy]

Great suggestion!

[@nfallycoly6362]

Awesome!!! it's very helpful. But can you please explain how to avoid infinite loop with combineLatest?

[@MonsterlessonsAcademy]

The is no infinite loop with combineLatest by default. It is your code that might do that.

[@rsroshi4201]

Hi, beautiful code setup, can you please make a video on your theme and vs code extensions please.

[@MonsterlessonsAcademy]

I'm using Vim and not Vscode. Here is my video about it kzbin.info/www/bejne/j6Ovmqidec12q80 my theme is gruvbox.

[@celestecolautti573]

excelent content thank you so much!

[@MonsterlessonsAcademy]

You're very welcome!

[@wiliam334]

That is amazing. Which ide and plugins u t using? And do u have course for sale?

[@MonsterlessonsAcademy]

It's vim kzbin.info/www/bejne/oGfYooKsibekbKs kzbin.info/www/bejne/j6Ovmqidec12q80 kzbin.info/www/bejne/jpKXkoKFd5yLkNE No I don't have sales. The prices are $10 on average which is already quite low for 8+ hours of content.

[@sinaebr7337]

very clean and beautiful tutorial. does combineLatest is deprecated and should use in pipe? an other function that i use mostly firstValueFrom for change to promise also tap function in pipe

[@MonsterlessonsAcademy]

Any rxjs function should be used in pipe. Usage of functions without it was deprecated long ago.

[@deathscythe3124]

Why the filteredUsers$ didn’t show the two objects after you set the one object to false?

[@MonsterlessonsAcademy]

As I said in the video the filter of RxJS doesn't work as a filter in Javascript. It stops stream value, not transform the stream

[@deathscythe3124]

@ thank you for clarification! I now understand and will take note of it.

[@mallikk28]

Great sir.

[@MonsterlessonsAcademy]

Thank you!

[@infermusg995]

Great Video , thanks

[@MonsterlessonsAcademy]

Glad you enjoyed it

[@miloszivkovic6607]

Long live the king!

[@ilsrbn]

Hello, thanks for your video, it's very useful and well structured! Also I have two questions about themes you describe. 1. While we work with our template it's good approach to use async pipe to avoid manual subscripton and handling unsubscribing. But when we need, for example to create a product: we need to make an API POST call, retrieve a result and redirect user back to All Products list with updated list. As API POST call still return an Observable, not Promise that we can await, is it good approach to manually .subscribe() to API POST call and inside redirecting user back? If yes, do we still need to .unsubscribe(), from this api call (it's still an Observable)? This is not really clean while you almost always hear things like "You need to manually .subscribe() as as little as possible". 2. In case if need to make multiple api calls one by one after submitting our new product from previous question, for example: 1. createPost API call and retriee postID, 2. Upload photos attached to retieved postId. In this case, is it OK to make nested subscribes, like: createPost.subsctibe((postId) => uploadPhotos(postId).subscribe(() => this.router.navigateByUrl('/'))) ? Again, thanks a lot for your videos and explanations!!!

[@MonsterlessonsAcademy]

Use async pipe for streams with data like behaivoursubject. Don't use it for api calls. For API calls use subscribe and sync the results with data inside behaivour subjects. Nested calls are bad. for this case use concatmap.

[@ilsrbn]

@@MonsterlessonsAcademy thanks a lot!!

[@imperfectionist4535]

Thank you!

[@MonsterlessonsAcademy]

You're welcome!

[@hirowf]

Insane bro!!!!

[@MonsterlessonsAcademy]

Thank you!

[@uaplatformacomua]

Why didn't you do the course by RXJS, full course??? I will buy it now.

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@nashwan8829]

شرح فضيييع وسلس

[@mab7627]

How will we handle http error using pipes if we dont use subscribe method?

[@MonsterlessonsAcademy]

You don't. You use subscribe and BehaivourSubject or any other stream which has just plain data and no errors. data$ = new BehaivourSubject([]) getUsers().subscribe(users => data$.next(users)) {{data$ | async | json}}

[@KushanShanuka]

assume that we are using real api http call, in users$ and filteredusers$ both set in html. is it call api twice? by the way i suggest you to make videos for other rxjs functions like (shareply,distinct etc...) love the way you explained... ♥

[@MonsterlessonsAcademy]

you never do api calls in html. Check my videos on behaviorsubject on the channel.

[@KushanShanuka]

@@MonsterlessonsAcademy ok thank you

[@_Greenflag_]

Hey, thanks for sharing knowledge. Just saw you offering courses, but I would be more interested in a particular course (1 v 1), if it's affordable, of course. Is it something you offer ? Cheers

[@MonsterlessonsAcademy]

What exactly do you means by 1v1 course? I don't record specific courses because I want popular tech that people want to buy

[@_Greenflag_]

@@MonsterlessonsAcademy direct lesson in live. Particular course :)

[@_Greenflag_]

@@MonsterlessonsAcademy private lesson

[@MonsterlessonsAcademy]

@@_Greenflag_ No I don't do that because I don't have enough time for 1 on 1 tutoring.

[@guntherrondina2190]

Excellent video although i have little concern on the combineLatest, I think that just over complicate things and not everybody will be able to read it at first glancem but overall great video

[@MonsterlessonsAcademy]

combileLatest is wildly used especially in angular.

[@zzzbyyy]

i have one questions ... if i have list of users from observable displayed in template via pipe ... and one user is updated ... does all users in template will be re-rendered ? (or i have to use somehow trackBy)

[@MonsterlessonsAcademy]

You should always write trackBy. Doesn't matter if it's an observable or not.

[@karthikeyan878]

we are using ASYNC pipe when using GET method API calls and display the values in UI. likewise can we able to perform POST, UPDATE,DELETE operations without using the subscribe method?

[@MonsterlessonsAcademy]

No way. You need subscribe to trigger api request.

[@ohmegatech666]

On the last example, I'm getting the error: Type '{ id: string; name: string; } | null' is not assignable to type 'NgIterable | null | undefined'.ngtsc(2322) declare (property) NgForOf.ngForOf: NgIterable | null | undefined The value of the iterable expression, which can be used as a template input variable. No quick fixes available

[@A__Singh__]

KZbin needs to add a ❤ button

[@vihangafernando6644]

Hi Do you have a crash/full course on RxJs?For a beginner?

[@MonsterlessonsAcademy]

Hi, unfortunately not yet

[@jomerverola4880]

How do you have suggestions like that every type theres suggestion seems make the work easy how to do that?

[@MonsterlessonsAcademy]

I don't know. Just experience.

[@benchik100]

Thanks❤

[@MonsterlessonsAcademy]

You're welcome 😊

[@pankajshinde9269]

Can you make more videos on behaviour Subjects and real-life cases

[@MonsterlessonsAcademy]

Thank you! I will add it to the list of ideas.

[@anutaNYC]

But if there is one inactive user how to filter the stream and show users?

[@MonsterlessonsAcademy]

You might confuse Rxjs filter and js filter. Rxjs filters the stream completely and you don't get any data from it. If you want to filter inactive users and render only active users you don't need Rxjs filter but Rxjs map

[@anutaNYC]

@@MonsterlessonsAcademy yes I am! But you can still display users with filters if all is true

[@roman-tp6sd]

Combine latest is beautiful.

[@MonsterlessonsAcademy]

It really is!

[@BrockFredin]

@@MonsterlessonsAcademy No, it sucks. It's an anti-pattern.

[@oreidosites]

how can i implement it on a table?

[@MonsterlessonsAcademy]

Here is a custom Angular table with observables. kzbin.info/www/bejne/mIPUfHyjpMyVaM0

[@riketscience]

bravo mate

[@MonsterlessonsAcademy]

Thanks

[@mouhamedanflousse38]

which VS code color theme do you use

[@MonsterlessonsAcademy]

It's Gruvbox. kzbin.info/www/bejne/oqeum4Z4l7aLrtUsi=cMaPAt3Cde2c7P1S

[@rishimondal3010]

Can we do filterusers$ = this.users.pipe( Map(users=>users.filter(user=>user.isActive)?

[@MonsterlessonsAcademy]

Yes but this is completely different from rxjs filter

[@karthikeyan878]

If I have two http observables and I want to subscribe data when both observables completed. which rxjs operator should I use?

[@SaschaN]

combineLatest or forkJoin with both as arguments, very similar to the last example. But the choice is depending on the dependency between the http calls. The video is very good, but I think some time delays/state management would improve the understanding of rxjs

[@karthikeyan878]

@@SaschaN Thank you

[@MonsterlessonsAcademy]

Typically I would use forkjoin for such case.

[@CodingAbroad]

If I have a formarray and in each row there is a drop down list. Is there any problem using async to populate the list of the drop down bearing in mind there are multiple formarrays rows?

[@MonsterlessonsAcademy]

I didn't have any probles with angular forms and async pipe.

[@nspo1983]

I just encountered that exact scenario recently. Each time a new Form Array control was added, the dropdown for the new control would call the api and create a new stream. After watching this video, I think that combining my streams and pipe/mapping them out would be a great solution to the subscription I ended up going with for my FormArray dropdowns.

[@novankuncoro6100]

this is gold

[@MonsterlessonsAcademy]

Thank you!