Це відео не доступне.
Перепрошуємо.
Rxjs Streams in Angular - Normalizing Data (Map and Pipe Operator)
Вставка
- Опубліковано 17 сер 2024
- In this video you will learn what are RxJS streams in Angular. We will check on the real example how convenient it is to use RxJS map and pipe methods for normalizing data inside our service from observables which we are getting from API.
🚨IMPORTANT:
→ Advanced Angular course: monsterlessons...
→ All my courses: monsterlessons...
→ Twitter: / monster_lessons
🕛 TIMESTAMPS:
0:00 Introduction
1:26 What are streams in RxJs
3:40 Normalizing data with RxJs in Angular
6:04 RxJS pipe and map methods
11:39 Call to action
📚 References:
→ Angular for beginners - Full Playlist: • Angular Course Online ...
→ Source code: github.com/mon...
Watch next: Angular 2 Routing and Navigation - Tutorial and Example - ua-cam.com/video/XqSNUXI4Hb0/v-deo.html
He may be talking like a robot but the content is extraordinary.
Thank you!
Very well explained. Its difficult sometimes finding a clean explanation of these functions but this one helped me actually understand it properly. Thank you!
Here is a follow up for you on this topic
ua-cam.com/video/2T3F5TfrYwI/v-deo.html
Your intro and outro are world class. Not to mention the content of your short videos.
Thank you!
Thank you so much! I have seen around 10 videos on this topic and this is the best video that has cleared my doubt! Subscribed!
Glad it was helpful!
great explanation! tks!
Glad it was helpful!
such a great Explanation ! keep up the great work
Thanks, will do!
Bro, I found this a little later but it is a great explanation, thanks man!
Glad to hear it!
I can see that you've made improvements over the years with your videos to work on how you use inflection in your voice. It still feels really robotic when listening to the content, but you definitely have concise lessons that get things across the way they need to be.
Wow, thank you!
I think once you really get down the inflections of your voice to be more natural and uplifting, your stuff should really grow a lot. When an instructor is easy to listen to and has a nice speaking rhythm, it makes it way easier to absorb the content and learn.@@MonsterlessonsAcademy
@@mybootscamewithoutstraps I would listen to you speak any language that is not your native one. Slavic for example. And how you use inflections in your voice.
Very well and detailed explained. Thank you, it was very helpful!
Glad it was helpful!
Perfect explanation. Just top notch.
Glad you liked it!
Me ajudou muito, obrigado! 😁
Crystal clear 🔥
Thank you!
Thanks sir! Help me a lot!
Glad to help!
Very good video for map operator... thanks for it man...
I'm happy that I like it!
Very Very good explanation! Thank you.
Glad it was helpful!
Very well explained
Glad it was helpful!
Nice 👍!!
Thanks!
excellent sir, very helpful real-time example
Glad it was helpful!
very nice explanation.
Glad you liked it!
Your video is very good.
I have only one mention:
In method getUsers you could have used return users.map(user => user.age += ' years old')
I dont think it is needed to return a new object but just return the same one and modify only the properties you need
That is possible but it is safer to write immutable code and never mutate any properties (which I typically recommend to do). Then you never get the situation that your code is suddenly changed from random place.
Hi Olex , its great video , is there any videos for angular chatbot with room , videos need for tips in angular
Hi Adhi, I have a new couse in Angular, Typescript, Socket io, Mongodb, Express where we build trello clone. Although it is not a chatbot but the websockets concepts are similar
monsterlessons-academy.com/courses/build-fullstack-trello-clone-websocket-socket-io
Is the online course still maintained? The website didn't look really responsive hence I am skeptical. But this is the best video i have seen on rxjs streams for angular. Really interested in advance angular course if it's still maintained.
You mean Angular NgRx course? Yes it is. It works on Angular 13 with 1 ngrx change where we inject it in other way which I mention in the course.
I'm open to changes on website just send me an email with screenshot what is not responsive and I will check.
Thank you
You're welcome!
Hello! Thanks for the excellent tutorial. One question. In the UserService, if I want to implement a method that returns Observable of only one user, the youngest one, what would be the code ? The important thing is that I want the service to return the observable of this user...So sorting by age would be done in the service, on the list of users.
You can just call sorting by age and take first element inside map of rxjs with Javascript
@@MonsterlessonsAcademy thanks a lot for quick answer. So, we keep the same rxjs functions pipe() and map(), that you have described for getUsers(), and just adapt the callback function inside map. I thought was necessary to use switchMap instead of map, but I was obviously wrong. And I guess the signature of this method would be getYoungestUser(): Observable
@@Georgii1212 Yeap
One thing I don't quite understand. When you "subscribe" to a stream, and the value in the stream changes, would the component that was subscribed to it automatically render on its own? (or is this something you need a BehaviourSubject for?)
Subscribe doesn't do anything with component. Only changing of the property will render template again. You typically use subscribe to call some other function. If you just need to rerender stream property it's better to use async pipe
{{foo$ | async }}
@@MonsterlessonsAcademy Sorry I should have been more clear. Even with the async approach, if the value in the stream changes, would the component that has the async pipe automatically rerender with the new value?
@@BGivo yes exactly. That is the whole point of using RxJS with Angular
@@MonsterlessonsAcademy Thank you. So if that's the case, what's the point of the BehaviourSubject then?
@@BGivo To create a stream where you can subscribe and update it anytime by using next.
Very cool angular videos!! But please you should think about using a more friendly IDE like VScode :)
Unfortunately it's not friendly for me and I can't be as productive there as I'm with Vim
awesome video , but try smiling sometimes.. :)
I will try my best
Друже, ти українець?
at 10 minutes is exactly why i dislike typescript, front end code your constantly manipulating data, so much extra work, for a benefit that doesn't matter on front end code, ur not going to ruin a database so its only purpose is to throw errors
Hence backend helps a lot in such cases. If an api sends a nice, clear outputs there will be no need to transform data
I don't see why http requests are observables. Observables can only have ONE observer, and HTTP requests will complete or error after they are executed. Yes, I can combine multiple observables and mutate their data, but I can do that with promises as well ... native. Plus I can simply await one or multiple promises that can be fired sequentially or all at the sime time. And I do not have to store subscriptions to unsubscribe if my component destroys itself.
Subjects can have multiple observers and they can emit different values over time, okay I can see the use of that, but I don't understand why http requests are observables. The ONLY usecase, where observables are superior in http requests is when I can use switchmap to cancel them. But for that I need an input stream as well ... 🙄
I think you need to address your questions to Angular team and it's architecture.
It is what it is. Using Angular with streams in the way how Angular was planned is easier that fight with bugs when using Angular in a way which was not intended.
Great video. Saw pipe() and map() everywhere but now I actually understand what they do. Your video about other methods is a great follow up: ua-cam.com/video/2T3F5TfrYwI/v-deo.html
You are totally right!
This guy looks like Christopher Walken
Lol I can see similarities. I hope to look that good when I get older :)
its a dead man
lol does this dude have a soul? he sounds dead inside
I sold my soul to get such awesome programming skills.