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

in this video i want to talk about risk js rxgs streams observables and how to use rxjs inside angular [Music] and actually inside the rxjs we have hundreds of different methods and it is really difficult for beginners to understand all these methods together with angular this is why in this video i want to focus only on things that i am using inside rxjs every day because they are super efficient and is needed in every single project and the first thing that i want to talk about in rxjs is the function off as you can see here i have an array of users and this is just a plain javascript array and let's say that we want to create a stream from some data and for this we can create user swiss dollar and with dollar bill market our streams and here we can write off and this is a function of rick's jazz and inside we can pass whatever we want this is just a plain data in our case we can write directly these dot users and we must import this off from rxjs so what a function does it converts plain data in the stream and now as you can see here user's dollar is an observable of an array with objects of id name and dejective and this is really a nice way to just convert your plain data inside stream if you for some reason want to work with them like with stream and typically what all people are doing when they're just starting with rickjs or angular they simply write here implements only need and after this they just subscribe to all the streams we subscribe and use plain data inside so they are writing something like this users subscribe and we are getting here our list of users and now we are doing something with them for example console.log and here we are getting users this is totally fine as a beginner approach as you can see it is working we are getting here inside subscribe access to our array of users but actually this is not how it is intended to be used because risk js inside angular shines when we are using it together with a sink pipe and actually when we are using subscribe as little as possible so the typical use case here will be to render this array of the users and for this we should not use subscribe we can use a sync pipe inside angular this is why what we can do here we can just write here div and we want to loop through our users this is why here we are just writing in g4 and we want to access every single user inside of a stream of users but this is a stream we can't write code like this after this we must write a sync pipe and in this case n global itself subscribe to the stream and when it gets data it will convert these users to just plain array of users and here inside this div now we have access to every single user and we can simply render here user.name for example let's check this out as you can see here we just see our plane array we don't need to bother here with subscriptions or with streams which actually means if you can use a sink pipe inside angular instead of word subscribe just do it it is much better because in this case angular itself creates this subscription and destroys it when you are destroying your component if you are doing subscribe like this then you must yourself unsubscribe inside on destroy if you won't do it then you will have a hanging subscription but typically people don't understand how they can transform data with rxjs this is why they just want to get rid of rxjs and just write subscribe and inside plain javascript code this is a bad approach this is why here i want to show you some methods that will help you to work with subscriptions let's say here we have an array of users and this is actually a stream and we can say that these users maybe are not available inside this component so we simply work with this stream these users might come for example from an api so this is just a stream and we want to get here an array of our user names which actually means here from every single object we want just to take a name and typically people will write subscribe and write it to some property but we can do much better we can create here a new stream which is called usernames and here we want to take our stream these users and now we can transform it and to transform a stream we must use a pipe this is mandatory but as pipe this is a function which help us to organize one by one all our functions inside which actually means here inside we have function one function two and function three for example which actually means this is a list of functions which will transform one by one our stream so these users are going through function 1 then function 2 then function 3 and the result of that function will be written here inside username so how we can use it here for example inside our pipe we can write another function which is a map and actually map is the most popular function inside the rix chess and we use map if we want to transform our data which actually means here inside map now we're getting access to our users and we can simply just return these users and don't do anything with them as you can see here users is an array of our objects exactly what was here in the stream and the main idea is that here inside map we can write synchronous code like plain javascript which actually means if here we want to get our names we can simply write users.map we're getting access to every single user and here we can write user dot for example name and we will map every single user which actually means here in usernames dollar as you can see here we get an observable of string array so it is not object array anymore this is an array of names and actually for this we don't need subscribe we don't need to create additional local properties and check that we fulfilled our subscribe here we simply have a stream which is based on our first stream and now we can just jump inside our html copy paste this code within g4 and write it for our user names with dollar and with the sync pipe and here we are getting access to every single username and we can simply render it here it is user name and now i just want to comment out our first div we don't need it anymore and as you can see in browser it is still working just as intended but here we are using completely another stream which we just created based on our first stream so if you need to transform data inside the stream to another stream it makes a lot of sense to leverage map function inside rxjs another super important function is filter inside rxjs and actually you can understand from the name it filters our data but actually it is not working like filter inside javascript when we are filtering an array inside javascript we simply leave less elements but when we are filtering stream it means that we're just coming through the stream later if the predicate is true what does it mean for example here we can create filtered users and this is also a stream and we want to get here only users when they are active which actually means if every single user in our array of users is active then we will get here our users if one of the users is inactive then we will never get here this stream will never be fulfilled how we can write it we can write here these users and we want to use also pipe as always and inside we pack not map but we are packing here filter and inside we are getting access to our users and we must return here true or false which means if we are returning here true as a predicate then the stream will be directly fulfilled but here we want to write some logic and we want to check that every single element inside users is active this is why here we want to check user dot is active so a function inside filter must return true or false in our case here we are checking every single element for is active and now here let's try to render our filtered users for this i will copy paste the first div that we have and just uncomment it here and we want to go through our stream filtered users here we have access to every single user and we are rendering it let's check this out as you can see here is our list and they want to comment out this thief because we don't need it anymore as you can see here all our names are there which actually means the stream was fulfilled but what will happen if one single user here will be false in this case here inside filter we will get false and this stream won't be filled with data and as you can see here nothing was rendered and actually if you will try here to uncomment this user subscribe and change it to filtered users then you will never get inside subscribe as you can see here it is not happening because it is filtered our user is inactive but here now we can change it to true and at this very moment we are getting here users inside console and our users are rendered here and it makes a lot of sense to write code like this when you want to filter your stream and as i already said we are using pipe and actually we can combine different things for example here we could take our map completely from here from our pipe and just put it here after our filter which actually means here is our first function inside pipe here is our second function to map our data this is completely fine and typically we combine our functions like this another thing that you will use every single day is behavioral subject and it might sound really scary but it is not what we can do here we can create a new stream which is a user and here we simply write new behavior subject and inside we must pass what data we have inside so for example i would say that we have here id string and name string or we have here now which actually means inside this stream we have two possible values this object or a null and here we must open round brackets and set the default value and typically we'll write here null which is a default value while we're writing code like this typically we want to fetch some data from the backend from the api and this will be your stream which you want to fill with data which actually means you have a page where you are rendering your user and by default you don't have any user this is why inside stream you have a null but then after some time you fetched the data and you put them inside your user stream at that very moment your stream must be automatically rendered this is exactly why we need behavior subject behavior subject is a stream that we can update and how we can do that for example here inside engine in it what we can write is set timeout to show that this is an api call and here inside set timeout for example with 2 seconds i want to update this user for this we are writing this dot user with dollar and here dot next and we are using next function when we want to update our behavior subject and as you can see here we can't just throw foo it is invalid we must write here either now or our valid user this is why here i will write id 1 and name john and this is the valid type of data so once again what we have here we have a behavior subject which is just a stream and by default it is now then at any moment we can use this user next and set some other data there and this will update our stream which actually means in different places we can subscribe to the stream and then all these places will be notified about new data this is why here we can write this dot user with dollar subscribe and here we're getting access to our user and now here i just want to console.log user so you can understand how it is working i'm reloading the page as you can see here user is now and then after two seconds we are getting user and here is our object which actually means this is a typical approach when you are working with api by default your data is now then after you fetch them you can simply write this user next for example and then you are setting data inside your stream and your stream will be rendered on the page this is why how we can render this data now we can just write here div and we want to write here ng if because actually we want to render this user only when it is not null for example we want to render a name and for this we can write here user dollar a sync pipe and actually a lot of people are writing like this inside this div they simply render user dollar then a thing and actually this can return you now this is why they are writing question mark dot and then name which actually means here we are waiting for this sync pipe if it is there and it is not now then we are rendering name as you can see this code is working here is our john but this code is really bad why that because here we first of all create two different subscriptions and yes angular creates them for us but it doesn't matter this is first subscription this is second subscription it doesn't make any sense and also this code is not looking really good what we can write instead we can write here as user in this case here we're creating inside this div a local property user and now inside we can write user.name and actually this code is working completely fine because first of all this ngif checks if our user is there which actually means if our user stream is null then we won't come here inside div and we don't need to write any checks like with question mark that this name property exists we will get here only when our user will be fulfilled another important function that you will use from time to time is from event inside rick's chess and actually from event helps you to work with dom events like with streams and this is extremely efficient for example here i can write document click and this is a stream and here i can use from event and inside i must first of all pass a dom element this is a document and then the event for example click in this case here i am not working with dom events i have here a stream and i can work with stream just like with any stream for example here we can write this document click subscribe and here we are getting our event and here we can just write console log event let's check this out i'm reloading the page and i'm just clicking on our page and as you can see here we're getting our event just like normal subscription to the document click but here you might say okay but it doesn't make any sense for me using this from event is confusing i can just write plain javascript with dom and yes you can but the main idea of streams is to combine them which actually means if you have just a single event it doesn't make a lot of sense but if your api calls are streams if your data for your state are also streams and your dom events are streams then you can combine them together and this is really easy insiderix chess this is why rxgs by default is not better than a single event on the document but if you want to write more advanced stuff inside angular it makes a lot of sense to use rixjs everywhere and the last method that i want to show you is extremely important and this is exactly a topic of combining our streams of data and what i want to show you is a function which is called combined latest and we're using it to combine our streams and typically what you want to do you want to take all your streams for the component and combine them in one single object in this case it is much easier to support a component and your markup inside html will be much cleaner let's try this out now as you can see here we have our users dollar usernames dollar and filtered user dollar and let's say that we need all these data all the streams inside our html and what we can do we can combine them in a single stream of data this is why here i want to create data dollar and they typically name combined streams like data dollar and here we can simply write combine latest and this is also a function from rick's jazz and here inside we're throwing an array of streams and here first of all we want to write this user's dollar then this usernames dollar and then this dot filtered users dollar and actually here we could also write document click but it doesn't make a lot of sense the main idea is that any streams can go here inside but here is a problem what we will get back an observable of array and inside array we have these three elements it is not comfortable to work like this inside html this is why what i like to do is map this data so here we can write pipe map like we did previously and here we have access to all three data inside our array so this is first of all users then our user names and then our filtered users and what we can do here we can just return this data like an object and inside we will have first of all our users then our user names and then our filtered users which actually means we simply combine our streams we map them to the object and now this data dollar is an observable of the object and here we have first of all key users then user names and then filtered users and with this structure it is much easier to write html we can jump to our app component and now just write here div and give and what we want to do here we want to resolve this data stream this is by here data dollar is sync as data and now inside this div we have access to everything inside data data users data filtered users data usernames which actually means we can copy paste all this code inside our div and change it and now we just work with the data without any streams this is why here let user of data dot users now here we have user names and actually it will be data dot usernames and we can remove a sync pipe and here is our filtered users this is data dot filtered users and now just to bring some understanding i want to put dashes here inside markup let's check this out as you can see now on the page it is working and we have three sections first of all our users then our usernames and then our filtered users and actually this is the best possible approach that you can use if you want to combine different streams of data and render them inside your component and actually if you are interested to know how angular animations are working make sure to check this video also

Channel: Monsterlessons Academy

Views: 75,985

Keywords: rxjs, rxjs angular, rxjs from, of rxjs, rxjs observables, rxjs observable, behaviorsubject, combinelatest, async pipe, rxjs pipe

Id: 2T3F5TfrYwI

Length: 19min 16sec (1156 seconds)

Published: Tue Jun 28 2022