Angular 9 Tutorial For Beginners #54 - Observable

hi friends welcome back to our crow Hills we are continuing with our angular 9 full tutorial series and in today's episode we are going to learn about observables what are observables why do we need them how do we use them what are some real time use cases that we can implement and also kind of relate to when they start working on it we learn all about it in this today's episode welcome back my name is shredder I bring over 10 years of experience as a full-stack developer and I'm here to share my knowledge with you I'm also here to learn from you all so during the course of this tutorial series if you have any doubts any queries feel free to ask me in the comment section below I'll be happy to help you a lot of you are already encouraging and supporting me by liking the videos and subscribing to my channel thank you so very much so this is part of the angular 9 full tutorial playlist now we have close to 50 plus tutorials ranging from introduction basics to advanced the playlist link is in the description box below make sure you check it out to learn and master angular 9 all right so today we are starting on angular HTTP tutorial so observables is to the first in that series it's important to know and learn about this because a lot of angular implementation of HTTP involves observables let's get started so at the end of this tutorial we'll be able to learn what are observables what is an observer what are the different methods available in the observer and how do we subscribe what is subscription and how do we implement multiple subscribers to a single observable so all of this you learn at the end of this tutorial let's get started so the first question that is that is often come that comes to mind is what are observables so observables are a sequence of data that is emitted a synchronously over period of time means that automatically whenever there is a change in the data it is automatically updated and tracked by our observable angular makes use of observables as an interface to handle a variety of common a synchronous operations they are frequently used in angular and as the end is one of the recommended techniques for handling event events a synchronous programming and handling multiple values an observable can deliver multiple values of any type it can be a string it can be an event etc depending on the context now the next important thing to understand in observables is an observer so what is an observer whenever we create an observable we have to keep a track of the on the observable and to keep track we use something called observable so observer is nothing but it is continuously listening to observable observable for changes we can control when to start and when to end listening to the observable using observer so observer has three methods one is next other is error and complete so these are the three most frequently used we can also use other methods like remove etcetera but these are the three main methods that we use most of the times then comes subscription or subscribe whenever we implement an observable it won't do anything on its own so it's basically waste if you do not subscribe to it observables will keep sending values over a period of time but we need a mechanism to capture that we need a mechanism to track to process that data that is sent by observables and that is where we have to subscribe to it so in short when you whenever you say subscribe you mean we are trying to process the data sent by the observable we have multiple we can have multiple subscribers for a given observable so the question comes can I have more than one subscriber on a given observable yes we can definitely have more than one subscribers for any given observable you can also unsubscribe from a subscriber so these are some of the common things that you should be knowing about so first is observable the second is observer the xxx subscription now will exceed that into the hands-on examples before I go there let me open up the notes for you so just to recap we'll make some notes and that way it will be easy for you to refer to it whenever you're practicing alright so I'm going to open notes here so we are going to learning about observable so the first thing you should know is observable is part of our X J's library right and what is an observable so we need to import observable into our component where we want to make use of that now next observable is a sequence of data that is emitted over period of time now this data this data can be of any type string literal events etc angular uses observables very frequently in most in most asynch operations right now main things if I have to call out it will being HTTP routing event handling these are some of the common use cases that angular continuously uses and is heavily dependent on it now that being said that the next one so in order to in order to listen and track the changes of observable we need observer observer well continuously continuously continuously we track the changes in observable observer has main has many methods that we can use right so it has many methods that we can use some of the frequently used ones are next error and complete so these are some of the commonly used frequently used methods inside an observer now observable as it is useless unless we subscribe to water so why subscribe do you mean that I subscribed we mean that we are processing the data /values sent by observable over period of time right we can have multiple subscribers we can have multiple subscribers to our observable we can also unsubscribe from a subscriber right so these are some of the high level notes that you should be aware of so if you understand these concepts I think we are good to start with our hands on example alright so one of the examples I want to give you is a shopping cart right shopping cart example now here let's say user places another order so user placed an order initial state of the order is in progress after some time after some time once after some time once the order is processed or received right is received status sure it processing once order is complete status should be complete right so this is an example where you see that the odd status of the order is changing right and we need to keep track of this and that's what we are going to build now another example that you can correlate to is user status online right when the user is active profile the online status is active and green once user is in actor status is idle and orange right so these are some of the use cases where you can relate to observables like where there is a change in the data and we are tracking it all right so that with that understanding let's build this example okay of a shopping cart using observable in our application from scratch so first I'm going to create a component and I'm going to call it observable okay so now that we have our observable we'll use this to learn observable here so what I'm going to do is open up my routing file and create a new route for observable so once you have created the observable and put that component so we have the component and the route part done alright so now let's start the application in the meanwhile if you have not yet subscribed please do so if you are liking the video so far please give a thumbs up it will take a minute again if you have any doubts feel free to ask me in the comment section I'll be happy to help you let's go to our application and let's reload it on the path ok so we see observable works which means that the component is correctly mapped to our route and we can see the observable all right so let's go to that okay to the component observable dot component or TS file and this is an empty template that we have so what we are going to do here is first we will declare few things let's say I'll say order status as one of the variable right order equal to empty initially there is no value and in the template we'll use interpolation order status and we'll use interpolation to put that value right so it's initially empty we also need a value to capture our observable so observable I'll say any so you see it's imported from rxjs alright now the next thing we'll do is create an observable so we'll write new observable new observable and then we will have to mention what is it subscribing to observer so we'll write an observer using arrow method right and then next what we need to do we need to send some values so let's use the set timeout method set timeout method and we will write and send some data so I'm going to say observer taught so these are the methods that I was talking about which are available in your observer so next error closed complete remove so these are all different methods that we can implement on our observable I'm going to use next which means send the next value so here I'm going to send in progress right and I'm sending and the timeout will be after 4 seconds sent this now similarly I'll copy this hug in and now I will say after 8 seconds it should be once like this is very our business logic would result so you'll do some processing of the order once you receive it then you will make it singing and then again once the order is complete you would say completed right so if you see this observable it won't do anything now like I told you it's just having a observable is not any use right because it will not do anything we need to subscribe to it so at the end of the observable if you see here this is the observable that's closing so here I am writing dot subscribe then you get a value and again and now we will write this dot order status equal to well now it's a string so I'm going to change it and make it any so it so we know that it can hold any type of data all right statements are not aligned okay let's align them now okay so so far we created an observable we have added some methods which is set timeout after four seconds eight seconds and 12 seconds or let me reduce this time here five and eight okay so now you see when we run this application it will subscribe the value it will listen to these values that are changing all right so let's refresh this and keep an eye here in the order status we are not doing anything it shows in progress then it will show processing then it will show complete automatically right so this is one of the examples that where you can see that it is a different data that is changing based on our requirement right so this is called sending different data from the packet right this is a sequence of data that is sent over a period of time now instead of I told you that we can have multiple we can have multiple subscription to a single observable so let's do that now so instead of subscribing here we can take this value and we can write since we have used a variable here what I will do is I will copy this right so here I can say they start data equal to right so now it says type subscription is missing from the following right so here we have to subscribe to that so we will say they store data equal they start tatertot subscribe right so we have used that this dot data and we are subscribing to it similarly we can again write this dot data to dot subscribe again so we need to use the same thing right so here we can have the similar assignment of for now you can i'm just assign them directly to data but you can usually what you can do is copy this again use it so now there is single observable but you can have multiple subscriptions to it so the other way of writing this is so here I will write this dot theta dot subscribe here I will say band u2 so see now this is second subscription second subscription right so this is the first subscription this is second subscription so you can do multiple things with the same observable right so I have an observable I am subscribing at multiple times and I'm changing it so we can do that now let me extend this by adding some methods now I don't want I want it to stop once the order is right once the order is complete we want to stop it that's where we can use observer dot complete so this will complete it that means it will no more it will no more listen listen or track for changes because you marked it as complete it will no more listen or track for changes similarly how to close the how to complete right you can also similarly have something like error so we can say that you know observer dot error right so if any what do you want to do with that basically so if there is an error what should you do with that right if there is some logic that has gone wrong or error handling you can implement dot error here so we have three main methods that we learnt observer dot next dot error and not complete right so these are the different things that we want to send so here we can say completed not here sorry so once it's complete then it won't listen anything so even if you send some data afterwards it will not listen to it let me show you that now okay let's copy this so if you send something after twelve seconds right and I'm sending a value after completion right but here I have marked it as complete here I have already marked it as complete at 10 seconds so now this value will not be updated or should not be updated its reloaded so we will see in progress and then we see processing we see completed that's it we will not see any changes anymore because we have already completed it right so it stopped it completed it will not give you this value it will not give will not show slash process this data as we have closed or by we have complete data right so that is the beauty of observables so I hope your queries on observables are now it's clear to you what is an observable how to use it and how do you subscribe to it so ask me any doubts give it a try try out all the examples I showed you give it a hands-on try and in the next one we'll start with HTTP client especially with services and dependency injection I hope it was helpful to you if you liked the video give a thumbs up I'll see you in the next episode where we start with HTTP thank you so much

Channel: ARC Tutorials

Views: 31,172

Keywords: Angular 9 tutorial for beginners, angular 9 tutorials, angular tutorials for beginners, angular interview questions and answers, angular live projects, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers, angular tutorial for experienced, angular 9 observable tutorial example, angular observable example tutorial, observable angular

Id: c2OG74Lz8Tk

Length: 22min 49sec (1369 seconds)

Published: Mon Jun 29 2020