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.
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.
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.
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
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
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.
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?
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?
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.
@@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 ?
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}}
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)
It's vim ua-cam.com/video/j6uqOvTRq6I/v-deo.html ua-cam.com/video/YrLiugDhCuk/v-deo.html ua-cam.com/video/Xa4aOOB7XZo/v-deo.html No I don't have sales. The prices are $10 on average which is already quite low for 8+ hours of content.
@@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
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?
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
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
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?
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.
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
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!!!
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.
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
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
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... ♥
WATCH NEXT: Beginner's RxJS Tutorial: Dive Deep with RxJS Crash Course - ua-cam.com/video/yJdh1_FbtjU/v-deo.htmlsi=qhsqP7Eu3Nd7_hIU
Straight to the point. In just 20 minutes of video I felt like, I’ve gain superpower.
Awesome!
Most underrated channel, this channel deserve more views and more subscribers
I appreciate that!
You are hands down the best RxJS / Ngrx / Angular teacher out there. Well done, good Sir, well done.
Wow, thanks!
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.
Glad to hear that!
I have never seen this much of clear understanding of observables, and that tricky (now easy) behaviorSubject.. Many many thank you for this ❤❤
Glad it was helpful!
That is the clearest and simplest approach i've watched so far. Thanks for the video! Amazing work!
Glad it was helpful!
Amazing channel with clear, practical instructions. Thanks and keep up the good work!
Thanks, will do!
this tutorial feels like you are unlocking a new level in Angular, amazing!
Glad you think so!
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.
Wow, thanks!
Wonderful tutorial! I’m really fascinated by the way you explain different things. Way to go!
Thank you so much!
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.
I have finally understood why we use combineLatest. Thanks a lot
Happy to help
Just what I wanted to know! Your fast and clear explanation is really important for everyday use. Thank you!
Glad you like it!
Coming from react to angular, your channel is a blessing.
Wow, thank you!
Thanks!
Thank you so much for your support. It means a lot to me!
Super good stuff man. Love your content. I'm relatively new to angular, and your videos are helping me a lot. Thanks!
Great to hear!
most of RxJs opertator completed in 20 min. Nicely explain all with example
Thanks!
Love this guy, his accent, and knowledge. Thx!
Thanks for watching!
Danke!
Thank you so much for your support! It means a lot to me.
@@MonsterlessonsAcademy
I have to thank you for your great work here and of course also on Udemy. 👍
Wow! I learnt a whole LOT out of this video. Thank you soo much, Mr. Olleksandr.
Glad to hear that!
Damn !!! so much to learn in just 19 mins... Thank you
You are welcome!
I am really impressed, this is an excellent video !
Glad you liked it!
Your angular explanation style is great and very clear!!!!
Glad you think so!
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
Glad you like it!
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
Dude! This video is fantastic!!
Glad you liked it!
Nice and clear explanation, thanx man
You're welcome!
You are the best explaining!
Thank you!
great content in just 19 mins.Thanks!
You're welcome!
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.
Great suggestion!
good explanation of basics RXJS
Glad you liked it!
This is a very comprehensive introduction with just the strictly necessary fundamentals, a great educational video
Glad to hear that!
I press like button before to see your contact. You always offer excellent content.
I appreciate that!
Thank you so much, your explanation is realy clear and simple, your knowleage is respectful. Thank you for sharing your experience.
Glad it was helpful!
Very clear explanation of important RxJs concepts... Amazing work! Keep it going :)
Glad to hear that!
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?
I talked about it here ua-cam.com/video/TFXpoabwBfU/v-deo.html
That was a great video thank you. At work we are dealing with a screen with multiple events and Rxjs made it simpler
Awesome!
Bro, u've just blown my mind, thanks, like really, thank you a lot!
Glad I could help!
Great video, as always. A video on how to test observables marbles testing etc would be awesome. Thanks.
Great suggestion!
Simple, straight and clear...
Thank you!
Awesome!!! it's very helpful. But can you please explain how to avoid infinite loop with combineLatest?
The is no infinite loop with combineLatest by default. It is your code that might do that.
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?
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.
@@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 ?
Excellent content please upload more such stuffs. Love from BHARAT
Thank you. Will do!
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
Great to hear!
How will we handle http error using pipes if we dont use subscribe method?
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}}
Much needed tutorial.Thanks!!
Glad it helped!
@@MonsterlessonsAcademy can you pls do a tutorial on how to unit test angular application
please keep going we need more and more angulqr content
Will do!
Absolutely insane, thank you. Coming from Vue i have problems to understand the reactivity in Angular.
Great to hear!
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)
You should always write trackBy. Doesn't matter if it's an observable or not.
That is amazing. Which ide and plugins u t using?
And do u have course for sale?
It's vim
ua-cam.com/video/j6uqOvTRq6I/v-deo.html
ua-cam.com/video/YrLiugDhCuk/v-deo.html
ua-cam.com/video/Xa4aOOB7XZo/v-deo.html
No I don't have sales. The prices are $10 on average which is already quite low for 8+ hours of content.
Hi very good explanation, I learned a lot thank you.
Glad it was helpful!
Do you have a videocourse for angular
@@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
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?
No way. You need subscribe to trigger api request.
Thank you so much! Very detailed explanation.
You're very welcome!
good stuff, thank you man! :)
Glad to help!
Excellent content!
Glad you think so!
Amazing video, thank you!
You are welcome!
Many thanks for the amazing session.
Glad you like it!
why I can't use inside 'filter()' other 'filter()'?
RxJS filter filters the whole stream by predicate. I don't see how filter inside would do something.
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
Any rxjs function should be used in pipe. Usage of functions without it was deprecated long ago.
thanks you so much dude, i love it
You're welcome!
Can we do
filterusers$ = this.users.pipe(
Map(users=>users.filter(user=>user.isActive)?
Yes but this is completely different from rxjs filter
But if there is one inactive user how to filter the stream and show users?
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
@@MonsterlessonsAcademy yes I am! But you can still display users with filters if all is true
Muchas gracias. Explicas muy bien. Bravo
Great explanations! Thanks
You're welcome!
Hi Do you have a crash/full course on RxJs?For a beginner?
Hi, unfortunately not yet
Thanks for the video. Please make a video for Cold and Hot Observables or NgRx
Great suggestion!
Excellent content. Thanks for this!
Glad you enjoyed it!
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?
I didn't have any probles with angular forms and async pipe.
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.
Your videos are incredible. You're an excellent teacher!
Glad you think so!
which VS code color theme do you use
It's Gruvbox. ua-cam.com/video/lvKjSBbQXxs/v-deo.htmlsi=cMaPAt3Cde2c7P1S
Very useful tutorial !! Thank you
You are welcome!
How do you have suggestions like that every type theres suggestion seems make the work easy how to do that?
I don't know. Just experience.
If I have two http observables and I want to subscribe data when both observables completed. which rxjs operator should I use?
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
@@SaschaN Thank you
Typically I would use forkjoin for such case.
Hi, beautiful code setup, can you please make a video on your theme and vs code extensions please.
I'm using Vim and not Vscode. Here is my video about it
ua-cam.com/video/YrLiugDhCuk/v-deo.html
my theme is gruvbox.
Cool!! Many thanks for your work!!
Glad you like it!
Thanks man great job :)
❤
No problem 😊
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!!!
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.
@@MonsterlessonsAcademy thanks a lot!!
Thank you for this video!
Glad it was helpful!
Wow, thanks a lot. Subscribed :)
Thanks for the sub!
how can i implement it on a table?
Here is a custom Angular table with observables.
ua-cam.com/video/bRqKImogb2k/v-deo.html
Thank you for this awesome content!
Thanks for watching!
excelent content thank you so much!
You're very welcome!
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
combileLatest is wildly used especially in angular.
Very useful, thanks.
Glad it was helpful!
Long live the king!
شرح فضيييع وسلس
Kind unrelated but what font is he using? :)
It's Monaco font
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
What exactly do you means by 1v1 course? I don't record specific courses because I want popular tech that people want to buy
@@MonsterlessonsAcademy direct lesson in live. Particular course :)
@@MonsterlessonsAcademy private lesson
@@_Greenflag_ No I don't do that because I don't have enough time for 1 on 1 tutoring.
Great Video , thanks
Glad you enjoyed it
Insane bro!!!!
Thank you!
Why didn't you do the course by RXJS, full course??? I will buy it now.
I will add it to the list of ideas
Great sir.
Thank you!
UA-cam needs to add a ❤ button
Can you please share your dot files for vim/tmux etc.
I made a video about my vim tmux setup: ua-cam.com/video/YrLiugDhCuk/v-deo.html
Here is my dotfiles gitlab.com/ejiqpep/nvim-config
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... ♥
you never do api calls in html. Check my videos on behaviorsubject on the channel.
@@MonsterlessonsAcademy ok thank you
Great video and I would subscribe but you said not to because Angular will do it for me.
Thanks❤
You're welcome 😊
were you born with angular ? you know so much. you good
Can you make more videos on behaviour Subjects and real-life cases
Thank you! I will add it to the list of ideas.