RxJS - Operators for Beginners 2020

welcome back to the introduction of rxjs in this video we'll discuss operators and the main reason rxjs is useful is mainly for the power of their operators so even though the observable is the foundation operators are essential for composing complex asynchronous code in a declarative matter so if you haven't seen the previous videos on setting up the coding environment and the introduction to what observables are I've highly encourage you to check that out first so let's get into operators so there's two main types of operators and they are the creation operators and the pipe herbal operators so let's first talk about the creation operators and a creation operator is essentially called to create a new observable so if we go ahead and we import and the most basic creation observable there is is probably the oz and we've seen this in the previous videos and the creation observables we can just import straight from rxjs and we can see that if we create a constant observable and then we say off of let's say the array 1 2 & 3 recall that we create an observable and then we subscribe to that observable with an observer so we can subscribe to it and by default if we pass in just one function the way we handle that is with the next observer function so that will be the default so what they will do is observer is just going to take the data and it's going to console.log it so it's going to take the observable it will subscribe to the observable and then or do something with that so okay let's go ahead and just open up do an NPM start and we can close that down and if we go to localhost 8080 I think we configured it too yep and we open up the console we can see that in the very simplest case we've been given an array of 1 2 3 if we refresh that once again we get the array 1 2 3 so that's what of is doing for us likewise there is a very similar one a similar creation observable and I might just write up here sorry creation operator so creation and another type that we can import is the from creation operator and if you're just coming out that it behaves in a very similar way so if we subscribe to from rather than seeing an array we see each individual element being clumps I logged out so that's the key difference between the two creation server was of and from and they're probably the most basic the most basic weight and the data of most forms into an observable so the next creation observer will take a look at is the interval so let's go ahead and grab that and we'll just comment this out so what we'll do here is we'll call the interval creation operator and we'll give it argument which is in milliseconds and if we go ahead and we just save that what we'll see is we get 0 1 2 3 4 and so on and they'll just continue on forever and essentially what the interval is doing is it creating observable that emits a new ascending number each specified period of time so we specified 1 second year so every second it will be displayed and we're just subscribing to that with our observer I next console.log for each observable that's being emitted so okay so the next one we can take a look at is a the from event so there's from and there's also from event and for this we'll need a button so I might go ahead and close that in our HTML file I'll just create a button and I'll just say click me with exclamation mark and then we can just use a little bit of JavaScript here and we can say let button equal document query selector and we'll just get the element button and what we can do with that Dom element is we can say just like with event lessness we can say we can create another observable or we can create an serve all tight with this from event observable creator and now we'll just take in the ID the element the Dom element and the type of event so we'll just do a click event here so this is here this here represents the observable and what we can do is we can subscribe to that observable so we've become aware of its existence and okay so in our next observer function when we click a button we get an event and in this particular case we're going to get a mouse event so we can just give it that type as a parameter and if you don't know you've type script we've got a video series on that so you check that out but then we can give that a console.log for that event and we'll just skip keep y/x for that to event so go ahead and save that we just get this this should be allocated see and if I save that and let's say okay we still got this other observable running in the background let's just turn this off here and you no longer need to subscribe directly to that so I might just put that up here and save that and now we have this quick here button so we click that and then we get the X direction where we clicked on that particular element so there probably these four probably the most basic and useful sort of ways to quickly create an observable so what we'll do now is we'll take a look at the Y football operators and they're the second and more powerful type of operators that we can use to manipulate our data or do something with our data so I'll just write here Piper ball operators and I'm like just go ahead and comment this out and comment this out too mm so yeah pipeable operators they're functions that take and observable as its input and returns another observable when their cord they do not change the first existing observable instance instead they return a new observable whose subscription logic is based on the first observable so let's just go ahead and just see an example of that so what we'll do is we'll just create a simple observable with off and our first possible operator will take a look at is the map white football operator and one thing I liked is a spy light here is when we're importing portable operators we import it from ArcGIS slash operate tools with an S so most of the creation operators are coming from rxjs and most of the type of all operators are coming from operators section in rxjs so what we'll do is we can just create a basic observable so we can just call it OBS a constant observable and this time we'll just do one two three sort of transform that into an observable now and what we can do is we can subscribe to that observable might just copy this line here and we can console.log out whatever value we get there so I might just change this to make it more descriptive and I'll change this to vowel and then I'll use a template literal in the air sixth notation and just on sell our log the particular value and we've seen what this will do so I'll be no surprised to see that this will output value one two and three all in separate lines okay so what our hyperbola operator map will do is it will so we have this observable one two and three and we wish to return say a different observer let's say we wanted to return them as two four and six we return that new observable based on this initial observable so we've this data one two and three we essentially want to double it but we don't return the original observable we return the new observable to be subscribed to based off that initial observables stream of data so Matt will give us back a new observable and then we can subscribe to this transformed observable and the map operator is responsible for implementing the transformation logic so let's just see that in action so before we subscribe to the observable we need to pipe it hence the name of pipeable operator and we can do that by calling the pipe operator and this pipe operator is used in conjunction with the pipe operator so we've seen the pipe operator before the piping the first observable which is this 1 2 3 data we're going to do something with it and transform it into a new observable and then we were subscribing to that new observable so let's go ahead and we'll use the map pipeable operator and we can do that just by calling Knapp like this and so basically it works similar to a map in JavaScript so for each one of these values 1 2 & 3 so for each value and I'll just call each value X we can map this to 2 times X so now if we subscribe to that we can see that we immediately get that value to value for value 6 and this is where you can start to see the power of operators we can essentially intercept asynchronous or in this case synchronous both synchronous and asynchronous code and we can do something with that or modified in some way I'll transform it or filter it or there's many different combinations of things we can do and we can return we can you know get those values back we'll do something with those values that we get back based off the stream of data fed into it so we can start to see how powerful this can become and okay so we'll just take a look at some other sort of server balls and I'll just comment this one out and I want to copy it for now and rather than this map core one that we can use is we can say okay we can say first for example and there's a ton of these and I might just import that as well so important first and this sort of is self-explanatory we can just get back the first value so all the values we have passed in we might just want the first one and this can be quite useful if we want to do some sort of you know some sort of request based off only the first value will receive rather than each individual ones so that's just another pipeable operator and there's a whole list on the rxjs website there's a whole bunch of creation operators and they categorize the WIPO operators into things like transformation operators which is what map is and there's also filtering ones and we'll take a look at filter in particular and there's join operators and all different types but I'm just going to cover you know the core you know the main ones that you would use and give you the information you need to be able to work out any of these types so yeah there's a lot of operators but there's a lot of power you can get with those large range of operators so anyway I'll just comment that out since we've seen the first bottle operator so I guess the next one we'll take a look at is the filter operator and okay so let's just get that in from our Express operators and what we'll do is we'll create a interval observable so we'll have a different type of observable here it's still an observable which is created in a different way so let's just say Const observable equals that's the interval and we'll use the same as before were to say interval of a thousand and that will be our observable that we created now what we want to do and we do want to subscribe to this observable as well so we'll copy that bit of code there and in our actually I might combine that straight on we're like that and before I subscribed to it I want to call ty now I might just open that up like that and put it on the next line yeah my to save it I should they'll reformat with the prettier extension and okay so inside the pipe we have the possible operator filter and what this is going to do for us is it's going to take the stream of values that we receive so in this case we're getting you know 0 1 2 3 4 5 forever and let's say we only want to return every even number so what we can do is we can filter these values and we've taken a for each value we can return say bell modulus 2 equals to 0 so what this they'll modulus equals to 0 will do is will result in either true or false so a filter requires a boolean expression to be evaluated and you know if it's true then it will pass the value into the SUBSCRIBE method but if it's false it will no longer reach the next method and if there was another nested cycle operator wouldn't reach that so it does what it says it's gonna do it filters out though is and this line here in particular that's just saying the remainder after division so if the value is 0 ok so that will equal 0 0 divided by 2 is 0 that equals 0 so there will be a result 1/2 well there'll be one left over and okay so that point equal to 0 2 divided by 2 is 0 and essentially 0 2 4 6 8 10 and so on will result in a true expression there so that means those values should be log to the console with our next observer let's go ahead and save that and we take a look here ok we get 0 2 4 6 and so on so that is the filter observable oh sorry the filter pipeable operator so the next one we might want to take a look at is throught all time so let's take a look at this and for this one I'll make use of the button once again so let's just get this in here like that I'll comment this one out yeah and our button with named up here already I might get this from event as well so let's uncomment these and yes we've got throught tool time we're going to need from event so let's just get that here as well [Music] was that a ring okay so that needs to be that's a creation operator so it doesn't not need to be there that can be here like that so we're selecting the button dominant element and then with that button for a click event we're subscribing to it and then we're logging out the client x value so what we want to do is we want to we want to do exactly that but before giving out that client x value let's just to remind ourselves what that's doing so we click this and we keep clicking it and we're gonna get the value for where we are meows is located on that button let's say we want to sort of on the first click we want to get it back but then we want to put a delay on it so let's say we wanted to make it so that if you click this multiple times only the first result will show and then have you know at one second between let's say before we can output another value to the console so we can sort of intercept their first observable with a probable operator and we can get the information from the first observable so that's just you know whenever we click on it what the X location is but we can pi/2 and we can do is we can say throttle time and we can just put a thousand here so that's a thousand milliseconds so now if I click it we get it back to the first one I click it again but if I keep clicking it notice that only once every second it will display that and that could be useful if you're you know paying for a server and you don't want to overload your have a huge amount of HTTP requests and you you know paying per request or something like that so you know you might want to sort of limit that and that's a perfect example of where they would come in handy okay so that's that I guess what we can take a look at now is a an input field let's say so let's say we have an input field here like this and we'll just say type text just take a string so what I'll do is I'll just what it should do yet so it should just create this input field here and let's say we just want it to log out our value into the console just to get things going so what we can do is might just copy this sort of form here so let's say let input and I'll just change this to input and I can change this type to input so there's an input type so just like there's a click type as input so whenever you type in data into the text box or something like that they'll trigger that event so we're using that from event creation operator once again and okay so we won't use this pipe here just now we'll just see what this is going to do for us but it should be noted that rather than a mouse event this time we're going to have a HTML input element so what we can do is we can say that this event is going to be an input event and what we're going to do is we're going to console.log out the value so we want the target value and this is going to error because it's not going to know the type so what we need to do is we need to sort of make this a HTML input oops input element type just like that and we surround that they'll be the target and then we can take that target and we can get the value of that target so we're just sort of coercing the type there so now with that when we type something in we get the string back that we typed in but just like in the example where we're limiting the HTTP requests to the server we may only want it back every so often and okay so let's see how we could do that and what we might do is we might rather than throttle time and I might just copy this down here get it closer to where our code is so we'll put the imports here and rather than throttle time we might use the bounce time and I'll show you the difference so well since we're going to use a pipe of what operator we want to transfer on the first observable into something so we can just say pipe and we're going to do something and then subscribe to that and then what we'll use is we'll use the advance time so okay so we've got to bounce time 1000 and if we type in something here notice that you have to wait one second to after you finish typing for that to be displayed so that's the key difference so rather than have been recognized on the first keystroke it's recognized only after 1000 milliseconds after that last input event so that's the key difference between throttle time and debounce time where for all the time it takes the first fill you and then sort of will delay the you know it won't work until the specified period of time it's reached but debounce time doesn't work initially and then it also is that one second after it finishes rather than a delayed period but often in rxjs we don't just use one pipeable operator and this is sort of awe and we use this pipe sort of methods because we can actually chain a bunch of operators together and one really common one to use is distinct such I might just eat until changed and okay this is automatically imported for us so what this will do is it will in theory what it should do is let's say you type in a name so I type in say John and if I type in say Johnny but then I go back to John before that period of time what it should do is it should recognize that the string hasn't changed but notice that it has actually shown us John log twice so you might be thinking what is this broken and what's going on here is it the method is sort of true but what we're inputting into that is a event so the value of a mission is the whole event object not just the value so something else in the entire event object is likely to be in change and it will have been changed hence that it's not distinct so one method we can use to alleviate this as we can okay so we've seen the map method so let's go ahead and chain that before we get to the debounce time or distinct them til change so what we can do is we can say okay we can take the map and okay so we know that the map is going to be some sort of event and we know it's going to be an input event let's give it that tight there and what we're going to do with an input event is essentially we're going to get this thing here so we can go ahead and have this arrow here to that let's see here an extra aronia okay so that yeah I know we need that us the quite exit this just needs a II like I don't know needs this one here so that's the blue bracket and then we probably need this purple bracket close the map as well okay so and then we need a comma here and now notice that what we've done here is we're taking the event sort of input and for that event input we're going to give back a I might change that to e we're going to get back just the value of that so rather than subscribing to the event we can subscribe to the value itself and we can just go ahead and save though you here and console.log that value just like that and we need a another one of these okay so let's take a look at this so now if I talking John I get back John if I try it being NY and backward space it before this one dozen milliseconds notice that it only logged it out once here so with effectively we've helped a theoretical sort of serve a load with debounce the time so it takes the input event but it sort of filters through them let's say and it just gives us back the the value itself so with the value itself if that value is the same after 1000 milliseconds time then it's distinct so you won't I'll sort of be filtered out through the subscribe and won't be passed into the subscription so yeah so rather than using this map in particular we can see that you know what I might do is I might just comment out this pipe here in tirely and we can just take a look at what the event objects giving so let's say I type in something so just talking J we get this input event and it's just an object of objects basically so we have an object and then let's say in target for example we have it say another sort of key value pair nested within so what we can do to sort of get information values out of objects so we sort of want to pluck out the value from the object and if we're a nested we want to sort of pluck out say target from the input event object but then we also want to sort of pluck out the value as well so what we can do for that particular case is we can actually use rather than this sort of convoluted mapping each and getting for the input and all that sort of stuff what we could do is we could get a black wipeable operator from the IHS operators so rather than this whole map thing what we can do so we can just say pluck and recall that we wanted the you want the input target value so we're getting the input value from the input event and then we sort of want the target they'll go into that target on sort of object and then it'll go into that and then we'll go to value and will pluck out that J there so we can just pluck out that know you like that we can save that and now we can say type in you John we get John a second later if I type in and Y and back again the user change the data but it was before the one-second delay time so still distinct thus it only made the one request but then if I did actually change the Johnny held that for a second then you get that back so this was like a broad overview of the power of rxjs operators we talked about the creation operators in particular of from integral and from the event and then we talked about various pipeable operators such as map filter and you know pluck and all these first oral timed advanced I'm just dinked them till change and if you need to look further into any particular operators you can just check out this rxjs - dev dot firebase app comm slash guys such operators website this has all of the other different categories of operators so you know for example there's a merge and merging operators together and merging observables together and as utility operators and stuff like that but I hope with this video tutorial that you're able to understand observe always understand operators and you should be out at this stage sort of use them as needed so in the next video I'll probably discuss subjects and then I might get into some other sort of scheduling in a video after that so I hope that helped and please subscribe to my youtube channel thanks so much for watching

Channel: Jon Peppinck

Views: 1,203

Rating: 4.8709679 out of 5

Keywords: rxjs, rxjs tutorial, angular 2 tutorial for beginners, rxjs observables, angular for beginners, angular 2 for beginners, angular2 for beginner, angular tutorial for beginners, angular 4 tutorial for beginners, angular 8 tutorial for beginners, angular 9 tutorial for beginners, angular 7 tutorial for beginners, rxjs 6, beginners, javascript, angular rxjs, rxjs marbles, reactive programming, rxjs operators, rxjs in urdu

Id: LPZQmJtRzas

Length: 35min 53sec (2153 seconds)

Published: Sat Apr 11 2020